概述
HTML5新增了许多新特性，特别是在动画和音视频方面，现在介绍一个HTML5新增的requestanimationframe，他能够用来处理js动画过度失效的问题。
requestanimationframe的了解
requestanimationframe()告知浏览器——你希望履行一个动画，并且要求浏览器鄙人次重绘之前调用指定的回调函数更新动画。该方法需求传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前履行，拿咱们行将要写的js动画来说，就是运用 requestanimationframe注册了一个回调函数，该函数理论上会鄙人一帧履行，这样，浏览器就能够在当时帧制作元素的初始装填，然后，鄙人一帧切换元素状况的时分，能够使得元素有过度作用。本质上，它的出现是为了处理setTimeOut定时器由于事情循环导致的不精确，然后防止动画帧的卡顿和延迟。
js完结元素的显示躲藏的过度
接下来，完结一个盒子初始的时分，在右侧距离100px，不透明度为0，过度到方位为0，不透明度为1，接着，当咱们移除元素的时分，从当时状况，过渡到距离当时方位100px，b不透明度为0。
目标作用
代码（有问题的版别）
很简单咱们依据作用会写出下面的代码，能够发现，按钮点击并没有出现动画作用，这是由于浏览器会在当时帧制作dom元素，最后结果是将enter-to这个类所具有的款式制作出来，而不会制作enter-from类所具备的款式，这样就会导致过度失效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 进入前和脱离后的状况 */
.enter-from,
.leave-to {
opacity: 0;
transform: translateX(100px);
}
/* 进入进程中和脱离进程中的状况 */
.enter-active,
.leave-active {
transition: opacity 0.5s linear, transform 0.3s ease;
}
/* 进入后，和脱离的状况 */
.enter-to,
.leave-from {
opacity: 1;
transform: translateX(0);
}
</style>
</head>
<body>
<button id="operate-btn">进入按钮</button>
<button id="leave-btn">脱离按钮</button>
<script>
// 进入
function createElement() {
let box = document.createElement("div");
box.style.width = 100 + "px";
box.style.height = 100 + "px";
box.style.background = "#008c8c";
box.classList.add("enter-from");
box.classList.add("enter-active");
document.body.appendChild(box);
box.classList.remove("enter-from");
box.classList.add("enter-to");
box.addEventListener("transitionend", () => {
// 过度完结，删去类名
box.classList.remove("enter-to");
box.classList.remove("enter-active");
});
}
// 躲藏
function removeElement() {
let element = document.getElementsByTagName("div")[0];
element.classList.add("leave-from");
element.classList.add("leave-active");
element.classList.add("leave-to");
element.classList.remove("leave-from");
element.addEventListener("transitionend", () => {
document.body.removeChild(element);
// 过度完结，删去类名
box.classList.remove("leave-to");
box.classList.remove("leave-active");
});
}
let btn = document.getElementById("operate-btn");
let leaveBtn = document.getElementById("leave-btn");
btn.addEventListener("click", createElement);
leaveBtn.addEventListener("click", removeElement);
</script>
</body>
</html>
改进
处理办法就是，咱们需求在浏览器烘托更新dom的下一帧履行动画切换状况，这里就能够用到requestanimationframe了，注意：在火狐浏览器中，为了处理动画失效问题，需求嵌套两个requestanimationframe回调兼容，具体能够参考mdn对其描绘。
<script>
// 进入
function createElement() {
let box = document.createElement("div");
box.style.width = 100 + "px";
box.style.height = 100 + "px";
box.style.background = "#008c8c";
box.classList.add("enter-from");
box.classList.add("enter-active");
document.body.appendChild(box);
// 下一帧动画过度： 若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用requestAnimationFrame ，这里记住要嵌套改回调函数
requestAnimationFrame(() => {
requestAnimationFrame(() => {
box.classList.remove("enter-from");
box.classList.add("enter-to");
//监听动画履行结束
box.addEventListener("transitionend", () => {
// 过度完结，删去类名
box.classList.remove("enter-to");
box.classList.remove("enter-active");
});
});
});
}
// 躲藏
function removeElement() {
let element = document.getElementsByTagName("div")[0];
element.classList.add("leave-from");
element.classList.add("leave-active");
// 下一帧动过度
requestAnimationFrame(() => {
requestAnimationFrame(() => {
element.classList.add("leave-to");
element.classList.remove("leave-from");
//监听动画履行结束
element.addEventListener("transitionend", () => {
document.body.removeChild(element);
// 过度完结，删去类名
box.classList.remove("leave-to");
box.classList.remove("leave-active");
});
});
});
}
let btn = document.getElementById("operate-btn");
let leaveBtn = document.getElementById("leave-btn");
btn.addEventListener("click", createElement);
leaveBtn.addEventListener("click", removeElement);
</script>
小结
上面的进程涉及到了浏览器的烘托进程，包含了音讯队列，事情循环的知识点，通过上面的requestanimationframe的用法，其实还能够替换成setTimeOut，他们都属于微使命，主线程使命履行完结后的下一tick，履行回调函数的代码，上面的进程也是vue中transition动画组件的完结思路，因而归纳出js控制dom元素切换动画履行过度的两个要点：
- 当dom元素挂载的时分，将动效附加到dom元素上
- 当dom元素卸载的时分。不要了解卸载dom元素，而是将附加的动画履行结束后，再移除dom元素
