• 單個節點
• 多個節點，每次只渲染一個

那么怎么同時渲染整個列表，比如使用 v-for？在這種場景下，我們會使用 <transition-group> 組件。在我們深入例子之前，先了解關于這個組件的幾個特點：

• 默認情況下，它不會渲染一個包裹元素，但是你可以通過 tag attribute 指定渲染一個元素。
• 過渡模式不可用，因為我們不再相互切換特有的元素。
• 內部元素總是需要提供唯一的 key attribute 值。
• CSS 過渡的類將會應用在內部的元素中，而不是這個組/容器本身。

<transition-group>
     <div style="margin: 10px;" :key="item" v-for="item in list">{{ item }</div>
</transition-group>

const list = reactive<number[]>([1, 2, 4, 5, 6, 7, 8, 9])
const Push = () => {
    list.push(123)
}
const Pop = () => {
    list.pop()
}

列表的移動過渡

<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'
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>

狀態過渡

Vue 也同樣可以給數字 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>

<style>
</style>