JQuery实现盒子2字型排列，动态添加数据动画

最新推荐文章于 2023-09-15 17:02:20 发布

未来可期xm

最新推荐文章于 2023-09-15 17:02:20 发布

阅读量221

点赞数

文章标签： jquery javascript 动画 css3

本文链接：https://blog.csdn.net/weixin_44231085/article/details/129184790

版权

动画效果
在这里插入图片描述
模块布局呈现2字形状排列，数据采用二维数组格式，布局分浮动向左和向右。

规律：

第一行：插入新数据的时候，从左插入-动画逐渐变大，第三个格子向下移动。
第二行：第一个格子，向下；第二个，第三个，向左移动。
第三行：第一个，第二个格子向左移动，第三个向右。
以后格子变动方向从第二行开始循环。
……

当动画执行完毕的时候，通过使用延时将新增的和移动过的数据重组到代码的data数组中，实现数据更新。这样页面中就会保持移动之后的状态

<!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>
    .moudle {
      width: 600px;
      height: 600px;
      border: 1px solid red;
      overflow: auto;
      
    }
    .moudle .item {
      width: 100%;
      height: 33.3333%;
      position: relative;
    }
    .moudle .item div {
      width: 33.3333%;
      height: 100%;
      border: 1px solid rgb(222, 239, 155);
      box-sizing: border-box;
      float: left;
    }
    .moudle .item:nth-child(2n) div {
      float: right;
    }
    .add-amin {
      width: 0%;
      animation-name: example;
      animation-duration: 2s;
    }
    @keyframes example {
      from {width: 0%;}
      to {width: 33.3333%}
    }
    .add-amin-bottom {
      width: 33.3333%;
      height: 100%;
      position: absolute;
      right: 0%;
      animation-name: amin-bottom;
      animation-duration: 2s;
    }
    @keyframes amin-bottom {
      from {top: 0%;}
      to {top: 100%}
    }
    .add-amin-right {
      width: 0%;
      height: 100%;
      animation-name: amin-right;
      animation-duration: 2s;
    }
    @keyframes amin-right {
      from {width: 0%;}
      to {width: 33.3333%}
    }
    .move-right-1 {
      position: absolute;
      right: 0%;
      animation-name: move-right-1;
      animation-duration: 2s;
    }
    @keyframes move-right-1 {
      from {right: 0%;}
      to {right: 33.3333%}
    }
    .move-right-2 {
      position: absolute;
      right: 33.3333%;
      animation-name: move-right-2;
      animation-duration: 2s;
    }
    @keyframes move-right-2 {
      from {right: 33.3333%;}
      to {right: 66.6666%}
    }
    .move-bottom-2 {
      position: absolute;
      top: 0%;
      animation-name: move-bottom-2;
      animation-duration: 2s;
    }
    @keyframes move-bottom-2 {
      from {top: 0%;}
      to {top: 100%}
    }
    .move-left-1 {
      position: absolute;
      left: 0%;
      animation-name: move-left-1;
      animation-duration: 2s;
    }
    @keyframes move-left-1 {
      from {left: 0%;}
      to {left: 33.3333%}
    }
    .move-left-2 {
      position: absolute;
      left: 33.3333%;
      animation-name: move-left-2;
      animation-duration: 2s;
    }
    @keyframes move-left-2 {
      from {left: 33.3333%;}
      to {left: 66.6666%}
    }
  </style>
  <script src="./js/jquery-3.6.3.js"></script>
  
</head>
<body>
  <button onclick="addData()">添加数据</button>
  <div class="moudle" id="moudle-body">
  </div>
  <script>
    let data = [
      [
        1,2,3
      ],
      [
        4,5,6,
      ],
      [
        7
      ],
    ];
    let count = 0;
    dataInit();
    //初始化
    function dataInit() {
      data.forEach((item,index) => {
        let arr = item;
        let html='<div class="item">';
        let leng = arr.length;
        arr.forEach(item_ch => {
          html += `<div>${item_ch}</div>`
        })
        html +="</div>"
        $('#moudle-body').append(html);
      })
    }
    function addData() {
      //第一位新增一个数据，并添加动效
      data[0].unshift('添加数据' + count);
      let html = `<div class="add-amin">${data[0][0]}</div>`;
      $('#moudle-body').children('div').first().prepend(html);
      $('#moudle-body').find('.item').first().find('div').last().addClass('add-amin-bottom');
      let num = data.length - 1 / 2;
      //按照上文中所叙述的规律 给每个div 添加移动效果。
      data.forEach( (item,index) => {
        if(index != 0) {
          if(index % 2 != 0) {
            $('#moudle-body').find('.item').eq(index).find('div').eq(0).addClass('move-right-1');
            $('#moudle-body').find('.item').eq(index).find('div').eq(1).addClass('move-right-2');
            $('#moudle-body').find('.item').eq(index).find('div').eq(2).addClass('move-bottom-2');
          } else {
            $('#moudle-body').find('.item').eq(index).find('div').eq(0).addClass('move-left-1');
            $('#moudle-body').find('.item').eq(index).find('div').eq(1).addClass('move-left-2');
            $('#moudle-body').find('.item').eq(index).find('div').eq(2).addClass('add-amin-bottom');
          }
        }
      })
      count++; //就是一个增加计数，无实质意义
      setTimeout( () => {
        let mark = '';
        let length = 0;
        data.forEach( (item,index) => {
          if(index == 0) {
            mark = data[index][3];
            data[index].pop();
          } else {
            data[index].unshift(mark);//将上一个数组中下移的改数组放到第一位
            mark = data[index][3];  //用来保存，需要存到下一个数组中的数据
            if(data[index].length > 3) { //判断当前数组内长度大于三，说明需要新增一个空数组用来放向下移动的模块。
              if(index == data.length - 1) {  //判断循环到了最后一项
                data.push([mark]);
              }
              data[index].pop();  //删除当前项的最后一项，前文中 mark已经保存过了
            }
          }
        })
        $('#moudle-body').empty();
        dataInit();
      },2000)
    }
  </script>
</body>
</html>