---

vue動畫的官方類名

如下來自vue官方文檔，提供了dom元素，插入Enter和刪除Leave的類名

Enter

1. v-enter-from：進入動畫的起始狀態。在元素插入之前添加，在元素插入完成后的下一幀移除。
2. v-enter-active：進入動畫的生效狀態。應用于整個進入動畫階段。在元素被插入之前添加，在過渡或動畫完成之后移除。這個 class 可以被用來定義進入動畫的持續時間、延遲與速度曲線類型。
3. v-enter-to：進入動畫的結束狀態。在元素插入完成后的下一幀被添加 (也就是 v-enter-from 被移除的同時)，在過渡或動畫完成之后移除。

Leave

1. v-leave-from：離開動畫的起始狀態。在離開過渡效果被觸發時立即添加，在一幀后被移除。
2. v-leave-active：離開動畫的生效狀態。應用于整個離開動畫階段。在離開過渡效果被觸發時立即添加，在過渡或動畫完成之后移除。這個 class 可以被用來定義離開動畫的持續時間、延遲與速度曲線類型。
3. v-leave-to：離開動畫的結束狀態。在一個離開動畫被觸發后的下一幀被添加 (也就是 v-leave-from 被移除的同時)，在過渡或動畫完成之后移除。

Transition組件

注意事項

1. transition組件僅允許一個根節點
2. 未自定義name的組件應用v-leave-from,自定義后v替換為name

<transition name="my">
</transition>
對應選擇器則為
.my-leave-from

觸發

1. 由 v-if 所觸發的切換
2. 由 v-show 所觸發的切換
3. 由特殊元素 切換的動態組件
4. 改變特殊的 key 屬性

本文僅涉及前倆種

實例

<template><div id="App"><button @click="flag=!flag">Change</button><transition><h3 v-if="flag">2222</h3></transition>
</div>
</template><script>export default {name: 'App',data(){return {flag:true}}
}
</script><style>.v-enter-from,.v-leave-to {transform: translateY(-300%);}.v-enter-active,.v-leave-active {transition: all 1s ease;}</style>

TransitionGroup組件

用于對 v-for 列表中的元素或組件的插入、移除和順序改變添加動畫效果。選擇類與Transition相同

注意事項

TransitionGroup的每一個子節點都要有一個唯一的key

觸發機制

我們使用一個實例，來說明各類的添加與刪除
實例為從【1，2，3】中刪除2

1. t0觸發刪除時
   新增元素會為其添加v-enter-from / v-enter-active類
   但本例無
   刪除元素添加.v-leave-from/.v-leave-active等類，離開的動畫
   移動的元素加上.v-move

實例

<template><div id="App"><button @click="delArr">Change</button><TransitionGroup tag="ul"><li v-for="item in Arr" :key="item">{{ item }}</li></TransitionGroup>
</div>
</template><script>export default {name: 'App',data(){return {Arr:[1,2,3,4,5,6,7,8,9,10]}},methods:{delArr(){let del =Math.floor((Math.random()*this.Arr.length))this.Arr=this.Arr.filter((item,index)=>{return index!==del})}}
}
</script><style>.v-enter-from,.v-leave-to {transform: translateY(-300%);}.v-enter-active,.v-leave-active {transition: all 1s ease;}.v-move {transition: all 1s ease;}.v-leave-active {position: absolute;}</style>

拓展

添加apper屬性與tag

待插圖