用html做的简版flip动画

2022-02-09 13:32:17 阅读：168 来源： 互联网

标签：const 简版 flip id html container div divs 节点

<!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>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .container {
        width: 200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
      }

      .container div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <button id="btn_add">添加</button>
    <div class="container"></div>

    <script>
      let divs = null;
      const btnAdd = document.querySelector("#btn_add");
      const container = document.querySelector(".container");

      const data = [
        { id: 1, c: "red" },
        { id: 2, c: "pink" },
        { id: 3, c: "purple" },
        { id: 4, c: "orange" },
        { id: 4, c: "yellow" },
      ];

      // 立即执行函数, 初始渲染 页面的 5 个彩色盒子
      (function render() {
        let html = "";
        for (let i = 0; i < data.length; i++) {
          html += `<div style="background-color: ${data[i].c}">${data[i].id}</div>`;
        }
        container.innerHTML = html;
      })();

      // 函数 获取随机颜色
      function getColor() {
        const r = () => parseInt(Math.random() * 256);
        return `rgb(${r()},${r()},${r()})`;
      }

      // 按钮点击事件
      btnAdd.addEventListener("click", () => {
        // 获取最新的 div 节点集合
        divs = document.querySelectorAll(".container div");
        // 旧的位置
        const oldRect = getRect(divs);
        // 添加元素
        const div = document.createElement("div");
        div.innerText = data.length + 1;
        div.style.background = getColor();
        container.insertBefore(div, divs[0]);
        // 获取渲染之后的位置
        const newRect = getRect(divs);

        // 核心原理: 假如有a, b两个节点, c 和 d 两个位置
        // 开始页面只有一个 a 节点, a 节点在 c 位置
        // 插入一个 b 节点在 a 前面之后, a 节点的位置 从 c 到了 d
        // 我们知道 a 节点在插入前的 位置 c 和 插入后的位置 d
        // 那么渲染的时候, 新插入节点 b 固定在 a 位置
        // a 节点 会出现在 d 位置, 然后通过 css3 转换, 移动到 c 位置 (最开始)
        // 然后 a 节点 从 c 缓慢移动到 d  <== 动画
        // 就造成了的 b 把 a 挤过去 的假象

        for (let i = 0; i < divs.length; i++) {
          const left = -(newRect[i].left - oldRect[i].left);
          const top = -(newRect[i].top - oldRect[i].top);
          const animate = [
            {
              transform: `translate(${left}px, ${top}px)`,
            },
            {
              transform: "translate(0, 0)",
            },
          ];
          divs[i].animate(animate, 300);
        }
      });

      // 函数 获取元素的具体方位
      function getRect(doms) {
        const domArea = [];
        for (let i = 0; i < doms.length; i++) {
          const rect = doms[i].getBoundingClientRect();
          domArea.push({
            top: rect.top,
            left: rect.left,
          });
        }
        return domArea;
      }
    </script>
  </body>
</html>

标签：const,简版,flip,id,html,container,div,divs,节点
来源： https://www.cnblogs.com/fmg224/p/15874599.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

用html做的简版flip动画