Vue动画多维动态网格

image.png

// 结构部分
     <div>
       <el-button @click="MultCell">多维网格动态</el-button>
        <!-- <div class="container">
          <div v-for="cell in cells" :key="cell.id" class="cell">
            {{ cell.number }}
          </div>
        </div> -->
        <transition-group name="cell" tag="div" class="container">
          <div v-for="cell in cells" :key="cell.id" class="cell">
            {{ cell.number }}
          </div>
        </transition-group>
     </div>
// data数据
cells: Array.apply(null, { length: 81 }).map(function(_, index) {
            return {
              id: index,
              number: (index % 9) + 1
            };
          }), // 多维数组

// 样式部分
// 多维网格
.container{
  display: flex;
  flex-wrap: wrap;
  width: 238px;
  margin: 10px 0;
  .cell{
    display: flex;
    // justify-content: center;
    justify-content: space-around;
    align-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid #aaa;
    margin-right: -1px;
    margin-bottom: -1px;
  }
  .cell:nth-child(3n) {
  margin-right: 0;
  }
  .cell:nth-child(27n) {
  margin-bottom: 0;
  }
  .cell-move {
  transition: transform 1s;
  }
}
// 多维网格结束

   // js部分
   // 多维网格动态
    MultCell(){
      this.cells = this._.shuffle(this.cells)
    },

使用了v-move给她过渡时间，vue会在元素的改变定位的过程中应用。shuffle 方法是loadsh里面的，使用要先下包