requestanimationframe解决js动画过渡失效

概述

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

requestanimationframe的理解

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

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

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

目标效果

代码&#x