requestanimationframe解决js动画过渡失效

概述

HTML5新增了很多新特性，特别是在动画和音视频方面，现在介绍一个HTML5新增的requestanimationframe，他可以用来解决js动画过度失效的问题。

requestanimationframe的理解

requestanimationframe()告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行，拿我们即将要写的js动画来说，就是使用 requestanimationframe注册了一个回调函数，该函数理论上会在下一帧执行，这样，浏览器就可以在当前帧绘制元素的初始装填，然后，在下一帧切换元素状态的时候，可以使得元素有过度效果。本质上，它的出现是为了解决setTimeOut定时器由于事件循环导致的不精确，从而避免动画帧的卡顿和延迟。

js实现元素的显示隐藏的过度

接下来，实现一个盒子初始的时候，在右侧距离100px，不透明度为0，过度到位置为0，不透明度为1，接着，当我们移除元素的时候，从当前状态，过渡到距离当前位置100px，b不透明度为0。

目标效果

代码（有问题的版本）

很容易我们根据效果会写出下面的代码，可以发现，按钮点击并没有出现动画效果，这是因为浏览器会在当前帧绘制dom元素，最后结果是将enter-to这个类所具有的样式绘制出来，而不会绘制enter-from类所具备的样式，这样就会导致过度失效。

进入按钮离开按钮
 

改进

解决办法就是，我们需要在浏览器渲染更新dom的下一帧执行动画切换状态，这里就可以用到requestanimationframe了，注意：在火狐浏览器中，为了解决动画失效问题，需要嵌套两个requestanimationframe回调兼容，具体可以参考mdn对其描述。

小结

上面的过程涉及到了浏览器的渲染过程，包含了消息队列，事件循环的知识点，通过上面的requestanimationframe的用法，其实还可以替换成setTimeOut，他们都属于微任务，主线程任务执行完成后的下一tick，执行回调函数的代码，上面的过程也是vue中transition动画组件的实现思路，因此归纳出js控制dom元素切换动画执行过度的两个要点：

1.当dom元素挂载的时候，将动效附加到dom元素上
2.当dom元素卸载的时候。不要理解卸载dom元素，而是将附加的动画执行完毕后，再移除dom元素

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享