javascript - 缩短 CSS 过渡？

Question

我正在对元素应用 CSS 过渡。

   target.style.transition = "color 10000ms ease";
   target.style.color = "red";

在某些情况下，我希望立即达到此转换的结束状态，而无需等待转换完成。

如果我尝试

   target.style.transition = "color 0ms";
   target.style.color = "red";

当前的过渡仍在继续。

正在做

   target.style.transition = "color 0ms";
   target.style.color = "blue";

立即将其设置为“蓝色”，而

   target.style.transition = "color 0ms";
   target.style.color = "blue";
   target.style.color = "red";

导致过渡的继续。（在 Chrome 和 FF 中都试过）

有没有办法阻止过渡？

Answer 1

要立即停止转换并达到结束状态，请使用

target.style.transition = "none";

见演示。