transition-group 前言

transition 是用来过渡单个元素的，transition-group 是来过渡列表的

我们想渲染列表的话，比如使用v-for，在这种场景下，这里我们用*transition-group组件来实现，让列表的数据抖动起来、下面来演示一下，先定义列表数据

import { reactive, ref } from 'vue';

const list = reactive<number[]>([1,2,3,4,4,6])

使用方法

transition-group 有一个tag属性，他会指定渲染一个DOM元素，默认是不会渲染的

transition-group 和 transition 用法是一样的，可以自定义Class，生命周期也一样，钩子函数用法都是一样的，这里借助enter-active-class、leave-active-class这两个钩子来渲染动画

搭配 animate 动画库一起使用,切记需要加 前缀animate__animated，非常非常好玩

这里添加了两个事件，添加和删除来操作数组

  <div class="content">
    <button @click="ADD">ADD</button><button @click="POP">POP</button>
   <div class="wraps">
    <transition-group enter-active-class="animate__animated animate__bounceOut" leave-active-class="animate__animated animate__hinge">
      <div class="item" v-for="item in list" :key="item">
        {{ item }}
      </div>
    </transition-group>
   </div>
  </div>

展示效果

列表的移动过渡

通过改变位置来添加动画，不需要通过v-if和v-show来切换动画，这里基于动画库来实现绚丽的动画效果

我们先定义9*9的数据，通过Array.apply来填充81个数据

import { ref } from 'vue';

let list = ref(Array.apply(null, { length: 81 } as number[]).map((_, index) => {
  return {
    id: index,
    number: (index % 9) + 1
  }
}))

将数据渲染到页面，9个数据为一行，定义每个div宽高为25px，设置一行数据为9个width: calc(25px * 10 + 9px);

  <button @click="random">随机</button>
  <transition-group class="wraps" tag="div">
    <div class="items" v-for="item in list" :key="item.id">
      {{ item.number }}
    </div>
  </transition-group>

这里借助一下 lodash依赖库， 通过npm i --save lodash安装依赖，页面引入

import _ from 'lodash'

这里引入会报一个无法找到模块“lodash”的声明文件的错误，这是因为没有做声明文件，这里在安装一个npm install @types/lodash -D依赖，重新启动项目就好了

利用lodash里面的创建一个被打乱值的集合的方法### _.shuffle(collection)去实现重新排列

const random = () => {
  list.value = _.shuffle(list.value)
}

最后通过设置平移动画的类move-class="active"来设置一下过渡效果

 .active {
    transition: all 1s;
  }