Css 如何使不透明度转换从其当前状态开始，即使它'；s目前正受到过渡的影响？

我正在创建一个幻灯片库，当用户按下“下一步”或“上一步”按钮时，我希望图像在其中淡入淡出

我已经通过使用过渡在3秒内淡出旧图像（图像x）和淡入新图像（图像y）来实现这一点。然而，如果我垃圾邮件的下一个/上一个按钮，新的图像（图像y，这是淡入）将跳转从任何不透明的它是在100%之前立即淡出

因此，我的问题是如何阻止新图像（图像y）跳到100%不透明度，而只是随着“新”图像（图像z）淡入而从其当前不透明度淡出

这是我的CSS：

.mySlides{
    opacity: 0;
    transition: opacity 3s ease-in;
}


.fade {
    opacity: 1;
}

然后我只需要一些JS来添加或删除.mySlides元素中的.fade类，使其淡入淡出：

slides[new_slideIndex].classList.add("fade");
slides[current_slideIndex].classList.remove("fade");

---

提前感谢您的帮助

从代码中，我假设您正在删除图像y的

淡入淡出

类，然后图像y才真正过渡导致错误

您可以

setTimeout（function（）{slides[current_slideIndex].classList.remove（“fade”）}，3000）

确保在3秒钟（完成转换）后将其删除，但我不确定结果如何，无法尝试，因为我没有所有必要的代码-尽管我相信它可以工作

---

另一种方法是防止垃圾邮件，在单击下一个按钮时添加

指针事件：none

属性，并在3秒后使用

设置超时将其删除，这样下一个按钮每3秒只能单击一次？
，我假设您正在删除图像y的
淡入淡出
类，然后图像y才真正过渡导致错误

您可以
setTimeout（function（）{slides[current_slideIndex].classList.remove（“fade”）}，3000）
确保在3秒钟（完成转换）后将其删除，但我不确定结果如何，无法尝试，因为我没有所有必要的代码-尽管我相信它可以工作

另一种方法是防止垃圾邮件，方法是在单击下一个按钮时添加
指针事件：none
属性，并在3秒后使用
设置超时将其删除，这样每3秒钟只能单击一次“下一步”按钮？
将代码共享给debug@DhananjaiPai我刚刚为您添加了代码。这不是一个简单的处理方法。也许可以给你一些建议。把代码分享给debug@DhananjaiPai我刚刚为您添加了代码。这不是一个简单的处理方法。也许我能给你一些建议。我想我可能把你弄糊涂了；图像加载时需要3秒淡入淡出，卸载时需要3秒淡出。在1秒时，图像的淡入度为33%不透明度，如果此时单击该按钮，则它当前立即从33%跳到100%不透明度，然后淡出3秒。我希望它做的是：保留33%的值，并从33%淡出3秒到0%。希望这更有意义？谢谢你的帮助！我想我可能把你弄糊涂了；图像加载时需要3秒淡入淡出，卸载时需要3秒淡出。在1秒时，图像的淡入度为33%不透明度，如果此时单击该按钮，则它当前立即从33%跳到100%不透明度，然后淡出3秒。我希望它做的是：保留33%的值，并从33%淡出3秒到0%。希望这更有意义？谢谢你的帮助！