即使当前受过渡影响，如何使不透明过渡从其当前状态开始？

Question

我正在创建一个幻灯片库，我希望当用户按下下一个或上一个按钮时，图像可以淡入和淡出。

我已经使用过渡效果来使之工作，以在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");

在此先感谢您的帮助！

Answer 1

从代码中，我假设您要在图像y的fade类实际过渡到引起错误之前将其删除。

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

另一种方法是通过向单击的下一个按钮添加pointer-events:none属性并在3秒后的setTimeout删除它来防止垃圾邮件，以便只能单击下一个按钮每3秒一次？