FLIP 练习

最新推荐文章于 2025-08-05 15:28:01 发布

web_Hsir

最新推荐文章于 2025-08-05 15:28:01 发布

阅读量141

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_44185995/article/details/143802679

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .item {
        width: 200px;
        padding: 10px;
        background-color: grey;
        margin: 10px 0;
        color: #fff;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button class="moveBtn">move</button>
    <div id="app">
      <div class="item">this is div 1</div>
      <div class="item">this is div 2</div>
      <div class="item">this is div 3</div>
      <div class="item">this is div 4</div>
    </div>
    <script>
      const app = document.getElementById("app");
      const moveBtn = document.querySelector(".moveBtn");
      moveBtn.addEventListener("click", () => {
        const items = app.querySelectorAll(".item");
        items.forEach((a) => {
          a.removeAttribute("style");
        });
        const first = items[0];
        const { x: firstX, y: firstY } = first.getBoundingClientRect();
        const cloneItem = first.cloneNode(true);
        app.appendChild(cloneItem);
        const { x: cloneX, y: cloneY } = cloneItem.getBoundingClientRect();
        cloneItem.style.transform = `translate(${firstX - cloneX}px, ${
          firstY - cloneY
        }px)`;
        app.removeChild(first);
        setTimeout(() => {
          cloneItem.style.transition = "all .5s";
          cloneItem.style.transform = "";
        });
      });
    </script>
  </body>
</html>