CSS3 不执行 Transition 过渡动画

如果元素设置了transition，那么当 JavaScript 改变相应属性值的时候，就会触发该过渡动画。

有时候，我们想直接设置该值，而不触发过渡动画，最直观的想法就是先设置 transition-duration 为0，然后设置该值，最后恢复 transition 的值。但是这个方法是行不通的，因为JavaScript是单线程的，它采用消息机制，当我们给元素赋予某个样式的时候，它并没有立即执行，而是继续处理当前的消息队列，直到进入到某个专门处理CSS的阶段（RecalculateStyle）。**这点和Node.js的事件机制很像。**前面说到JavaScript是单线程，因此采用上面方法的结果是“对同一个属性赋值，后面的覆盖前面的”，因此后续触发RecalculateStyle的时候，依然会触发过渡动画。

因此，解决该问题的思路就有两种

• 修改消息的先后顺序。
  通过人为的设置一个延迟（setTimeout、requestAnimationFrame），使transition的设置在RecalculateStyle之后被处理
• 手动触发 RecalculateStyle 使得修改生效。
  注意到有个 getComputedStyle 方法用来获取计算后的样式（以前我常用在获取伪元素的样式上），既然要计算样式，那么必定会触发 RecalculateStyle，这样之前的CSS就被处理了。

测试代码如下：

原始
setTimeout
requestAnimationFrame
getComputedStyle