Vue 封装的 过渡与动画 transition

一、作用

在插入、更新或移除DOM元素时 在合适的时候给元素提那家样式类名

二、写法

1、准备好样式

元素进入的样式：

　　a、v-enter:进入起点

　　b、v-enter-avctive:进入过程中

　　c、v-enter-to:进入终点

元素远离样式：

　　a、v-leave:离开的起点

　　b、v-leave-active:离开过程中

　　c、v-leave-to:离开的终点

2、使用<transition>包裹要过度的元素，并配置name属性

<transition  name='sd2' :appear='true'>
     <h1 v-show="flag">Hello World!</h1>
</transition>

v-enter要改成sd2-enter，其它同理

3、备注：若有多个元素需要过度，则需要使用<transition-group>，注意每个元素都要指定key值