时间戳

首页 > 解决方案 > 从左到右然后从右到左动画 div

javascript - 从左到右然后从右到左动画 div

问题描述

我正在看这个演讲：https ://www.youtube.com/watch?v=cCOL7MC4Pl0

演讲者谈到了 JS 任务和 DOM 渲染。他举了以下例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Task</title>

    <style>
      * {
        box-sizing: border-box;
      }

      .box {
        width: 50px;
        height: 50px;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>

    <script>
      var box = document.querySelector(".box");

      box.addEventListener("click", () => {
        box.style.transform = "translateX(500px)";
        box.style.transition = "transform 1s ease-in-out";
        box.style.transform = "translateX(250px)";
      });
    </script>
  </body>
</html>

并尝试将对象（点击事件）从位置 0 设置为 500px，然后从 500px 设置为 250px。换句话说，从左到右，从右到中。

他使用以下代码：

var box = document.querySelector(".box");
box.addEventListener("click", () => {
  box.style.transform = "translateX(500px)";
  box.style.transition = "transform 1s ease-in-out";
  box.style.transform = "translateX(250px)";
});

然后他解释了为什么它没有按预期工作 - 因为浏览器会在渲染/执行动画之前完成所有计算。这里一切都好。

然而，他说他通过将最后一个包装box.style.transform = "translateX(250px)";成一个双（嵌套）requestAnimationFrame()调用来解决这个问题。当我尝试这样做时，它做了与以前完全相同的事情。它没有用。这是代码：

box.style.transform = "translateX(500px)";
box.style.transition = "transform 1s ease-in-out";
requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    box.style.transform = "translateX(250px)";
  });
});

我在这里想念什么？如何让浏览器先执行变换操作到500px，然后再变换回250px？

标签： javascriptanimationdom

解决方案

视频中有错误。

这是正确的一段代码：

box.addEventListener("click", () => {
  box.style.transform = "translateX(500px)";

  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      box.style.transition = "transform 1s ease-in-out";
      box.style.transform = "translateX(250px)";
    });
  });
});

推荐阅读