如何使不透明度过渡从其当前状态开始，即使它当前受到过渡的影响？答案

【问题标题】：How to make an opacity transition start from its current state, even if it's currently being affected by a transition?如何使不透明度过渡从其当前状态开始，即使它当前受到过渡的影响？
【发布时间】：2026-01-12 12:55:02
【问题描述】：

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

我已经使用过渡来淡出旧图像（图像 x）并在 3 秒内淡入新图像（图像 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");

提前感谢您的帮助！

【问题讨论】：

分享调试代码
@DhananjaiPai 我刚刚为你添加了我的代码
没有简单的方法来处理这个问题。或许css-tricks.com/…可以给你一些指点。

标签： css image animation transition fade

【解决方案1】：

从代码中，我假设您正在删除图像 y 的 fade 类，然后它实际过渡到导致错误。

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

另一种方法是防止垃圾邮件，通过在单击时将pointer-events:none 属性添加到下一个按钮并在 3 秒后使用setTimeout 将其删除，这样下一个按钮只能每 3 秒单击一次?

【讨论】：

我想我可能让你有点困惑；加载时图像需要 3 秒淡入，卸载时需要 3 秒淡出。在 1 秒时，图像的不透明度为 33%，如果此时单击按钮，则它当前立即从 33% 跳到 100% 不透明度，然后淡出 3 秒。我希望它做的是：保留它的 33% 的值并从 33% 淡出 3 秒到 0%。希望这更有意义？不过感谢您的帮助！