Vue 3.x transition-group 动画组组件

Question

特点

• 默认情况下，它不会渲染一个包裹元素，但是你可以通过 tag attribute 指定渲染一个元素。
• 过渡模式 不可用，因为我们不再相互切换特有的元素。
• 内部元素总是需要提供唯一的 key attribute 值。
• CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

transition-group 组件具有与 transition 组件相同的 生命周期钩子 和 过渡 class 类名：

    <transition-group 
      tag="ul" 
      @before-enter="beforeEnter" 
      <!-- 对应 enter-from -->
      @enter="enter"
      <!-- 对应 enter-active-->
      @after-enter="afterEnter"
      <!-- 对应 enter-to-->
      @enter-cancelled="enterCancelled"
      <!-- 显示过渡打断-->
      @before-leave="beforeLeave"
      <!-- 对应 leave-from-->
      @leave="leave"
      <!-- 对应 enter-active-->
      @after-leave="afterLeave"
      <!-- 对应 leave-to-->
      @leave-cancelled="leaveCancelled"
      <!-- 离开过渡打断-->

      leave-active-class="animate__animated animate__bounceInLeft"
      enter-active-class="animate__animated animate__bounceInRight"
      >
      <li v-for="item in items" :key="item.id" :style="{color: item.color}">
        {{item.text}}
      </li>
    </transition-group>

列表的移动过渡

transition-group 组件还有一个特殊之处。除了进入和离开，它还能为元素定位位置的改变添加动画。只需了解新增的 v-move 类就可以使用这个新功能，它会应用在元素改变定位的过程中。像之前的类名一样，它的前缀可以通过 name attribute 来自定义，也可以通过 move-class attribute 手动设置

<template>
    <div>
        <button @click="shuffle">Shuffle</button>
        <transition-group class="wraps" name="mmm" tag="ul">
            <li class="cell" v-for="item in items" :key="item.id">{{ item.number }}</li>
        </transition-group>
    </div>
</template>
  
<script setup  lang='ts'>
import _ from 'lodash'
import { ref } from 'vue'

// 这里是直接替换数组，用 reactive 会丢失响应
let items = ref(Array.apply(null, { length: 81 } as number[]).map((_, index) => {
    return {
        id: index,
        number: (index % 9) + 1
    }
}))
const shuffle = () => {
    items.value = _.shuffle(items.value)
}
</script>
  
<style scoped lang="less">
.wraps {
    display: flex;
    flex-wrap: wrap;
    width: calc(25px * 10 + 9px);
    .cell {
        width: 25px;
        height: 25px;
        border: 1px solid #ccc;
        list-style-type: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
 
.mmm-move {
    transition: transform 0.8s ease;
}
</style>

状态过渡

可以给数字、 Svg、 背景颜色等添加过度动画

<template>
    <div>
        <input step="20" v-model="num.current" type="number" />
        <div>{{ num.tweenedNumber.toFixed(0) }}</div>
    </div>
</template>
    
<script setup lang='ts'>
import { reactive, watch } from 'vue'
import gsap from 'gsap'
const num = reactive({
    tweenedNumber: 0,
    current:0
})
 
watch(()=>num.current, (newVal) => {
    gsap.to(num, {
        duration: 1,
        tweenedNumber: newVal
    })
})
 
</script>