requestanimationframe解决js动画过渡失效

503 阅读2分钟

概述

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

requestanimationframe的理解

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

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

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

目标效果

动画.gif

代码(有问题的版本)

很容易我们根据效果会写出下面的代码,可以发现,按钮点击并没有出现动画效果,这是因为浏览器会在当前帧绘制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元素切换动画执行过度的两个要点:

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