重绘的目的

Question

如果要肉眼看到缓动的效果，可以使用 requestAnimationFrame 和 setTimeout 或者 reflow 或者其他需要时间完成的函数，是不是只要在增加 transiiton 监听 transform 变化，以及移除 transform 样式前，只要让这两句代码在执行时花费更多的时间，而不是立即执行，肉眼就能看到缓动效果。

也就是重绘的目的在这里是不是只是让这两句代码增加执行时间？

Answer 1

ustbhuangyi 2020-02-17 10:55:49

重绘的目的是让动画如期执行且并不需要增加额外执行时间，代码仍然是同步执行。

• 提问者 六一888 #1

  还是没懂其中的原因，只知道要使用一些方式才能触发缓动效果。如果没有重绘，没有异步，为什么缓动就不出现呢？为什么 transition 监听 transform 会失效？

• ustbhuangyi 回复 提问者 六一888 #2

  举个例子，比如一个平移的过渡动画，元素原本在 A 点，我要先把它移动到 B 点，然后再通过缓动移动到 A 点。那么代码就先通过 transform 移动到 B 点，然后再写 transform 移动到 A 点，配合 transition 动画，但由于整个过程是同步执行的，如果你不主动触发浏览器的重绘，浏览器就认为最终位置还是 A，那么就不会触发这段动画了。但当我们 transform 到 B 的时候触发重绘，浏览器就知道先把元素绘制到 B 点，然后就可以再通过 transform 缓动回到 A 点。

• 提问者 六一888 #3

  非常感谢！