#### 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" 先出后进