Cut a CSS transition short?

问题

I'm applying a CSS transition to an element.

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

Under certain circumstances, I want the end state of this transition to be reached immediately, without waiting for the transition to finish.

If I try

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

the current transition just continues.

Doing

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

sets it to 'blue' immediately, while

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

results in a continuation of the transition. (tried in both Chrome and FF)

Is there a way to stop the transition?

回答1:

To stop the transition and reach the end state immediately, use

target.style.transition = "none";

See DEMO.

来源：https://stackoverflow.com/questions/16376109/cut-a-css-transition-short