likes
comments
collection
share

requestanimationframe解决js动画过渡失效

作者站长头像
站长
· 阅读数 50

概述

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

requestanimationframe的理解

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

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

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

目标效果

requestanimationframe解决js动画过渡失效

代码（有问题的版本）

很容易我们根据效果会写出下面的代码，可以发现，按钮点击并没有出现动画效果，这是因为浏览器会在当前帧绘制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元素
转载自:https://juejin.cn/post/7144685433857769485
评论
请登录