缩短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";

立即设置为'blue'，而

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

导致转换的延续。(尝试在Chrome和FF)

有办法停止转换吗?

Answer 1

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

target.style.transition = "none";

看到演示。