vue元素实现动画过渡效果

1. v-leave 当前元素准备从显示转变成隐藏，在动画开始前添加到元素上，动画一旦开始会立即删除；
2. v-leave-active 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置过渡的效果；
3. v-leave-to 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置动画最终的效果；

事例中，当点击 button，div 并不会马上 display: none， 而是首先设置 v-leave ，下一刻即删除 v-leave ，同时添加 v-leave-active v-leave-to，当 v-leave-active 中的过渡时间执行完成，则删除 v-leave-active v-leave-to，同时添加 display: none。

1. v-enter 当前元素准备从隐藏转变成显示，在动画开始前添加到元素上，动画一旦开始会立即删除；
2. v-enter-active 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置过渡的效果；
3. v-enter-to 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置动画最终的效果；

事例中，当点击 button，div 马上清除 display: none， 然后设置 v-enter ，下一刻即删除 v-enter ，同时添加 v-enter-active v-enter-to，当 v-enter-active 中的过渡时间执行完成，则删除 v-enter-active v-enter-to。

2 自定义动画类名：

该效果与上一例效果完全一致的，transition 元素可以使用 name 属性来指定使用的类名前缀，从而代替 v-字段，例如事例中的 name="slide" 使本来的 v-enter 变成了 slide-enter。

3 transition 与 animation 同时使用时