截断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中尝试过）

有没有办法停止过渡？

- gzost

---

我想他们没有考虑到这种用例。如果可能的话，您可以将其设置为（例如）#FE0000，然后使用setTimeout(function(){/*在此处设置为适当的红色*/},0)（对于您可能正在动画化的其他几个属性也适用）。或者您可以使用setInterval或jQuery手动进行动画处理。 - Dave

Answer 1

为了立即停止转换并到达最终状态，请使用：

target.style.transition = "none";

请查看演示。

- Antony

---

这在所有浏览器中都测试通过。这里有一个类似的演示，使用相同的方法。 - Matt Coughlin