#### 1. 使用過渡類名實現動畫 1. 使用`transition`元素將需要過渡的元素包裹起來 2. 自定義兩組樣式，來控制`transition` 內部的元素實現動畫 + `v-enter` [時間點] 是進入之前，元素的起始狀態，此時還沒有開始進入 + `v-leave-to` [時間點] 是動畫離開之后，離開的終止狀態，此時，元素動畫已經結束了 ``` .v-enter, .v-leave-to { opacity: 0; } ``` + ` v-enter-active` [入場動畫時間] + ` v-leave-active` [離場動畫的時間段] ``` .v-enter-active, .v-leave-active { transition: all .4s ease; } ``` 3. 在`transition` 屬性`name="my"` 可以改變`v-enter` 的開頭v變為my 4. 在實現列表過渡的時候，如果需要過渡的元素，是通過v-for循環渲染出來的，不能使用transition包裹，需要使用transition-group，并且v-for循環創建出來的元素，必須設置`:key`屬性 5. `.v-leave-active` 和 `.v-move` 配合使用，能夠實現列表后續的元素，漸漸飄上來的效果 ``` /* 離開時變為absolute，導致下方上升 */ .v-leave-active { position: absolute; } /* 移動時的過渡時間 */ .v-move { transition: all .5s ease; } ``` 6. 添加appear屬性可以實現入場動畫效果，效果和動畫一致，tag='ul'可以使`transition-group` 變為ul，而不是span 7. mode\="out-in" 先出后進