transtition-group 过渡属性

<template>

  <button @click="random">随机</button>

  通过move-class属性,设置元素移动时的动画效果

  <transition-group tag="div" move-class="mm" class="warp">

    <div v-for="item in arr" :key="item.id" class="box">{{ item.number }}</div>

  </transition-group>

  </template>

 

  <script setup lang='ts'>

  import { ref } from 'vue'

  let arr = ref(Array.apply(null, { length: 81 } as Number[]).map((_, index) => {

    return {

      id: index,

      number: (index % 9) + 1,

    }

  }))

 

  const random = () => {

    arr.value = arr.value.sort(() => Math.random() - 0.5)

  }

  </script>

 

  <style scoped lang='scss'>

  .warp {

    display: flex;

    flex-wrap: wrap;

    width: calc(100px * 9 + 100px);

  }

  .mm {

    transition: all 1s ease;

  }

  .box {

    width: 100px;

    height: 100px;

    display: flex;

    justify-content: center;

    align-items: center;

    border: 1px solid #000;

  }

  </style>