requestanimationframe解决js动画过渡失效
概述
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元素
转载自:https://juejin.cn/post/7144685433857769485