vue中transition标签的使用（一）

transition to标签的使用

transition类名变更
v-enter→v-enter-from
v-leave →v-leave-from

transition标签上的name要和需要用到的css样式的开头一致

官方一共提供了6个样式



注：
css样式开头的sky是可以随意命名的，只需与transition标签上的name属性的值一致即可。
动画类之间不要使用其他类隔开，否则会失效。

自定义过渡class名

注：
自定义class动画会自动覆盖原有的动画
:duration 定义动画持续时间
:duration也可以单独设置进入和离开时间。
并且设置了可以有一定的延时作用（比如把enter的时间加长，比如10000毫秒和ok设为false，这样动画结束就会停留10000毫秒）

transition生命周期

transition标签上的 @before-enter和@enter 就是transition的生命周期

六个生命周期

enter和leave的第二参数done

@enter生命周期调用的enter方法中，使用第二个参数done，可以直接跳过动画的过程

注意：
如果Enter有第二个参数done，却不使用，生命周期afterEnter会失效

:css 属性

:css 可以根据true和fasle来执行或者消除动画（值不执行css）

注：
enter和leave如果不给第二个参数的话，可以被调用，根据持续时间结束。
transition标签上的:css属性的值如果为false，则没有动画，默认为true。
所有生命周期函数的第一个参数代表的就是动画元素。
enter，leave生命周期的第二个参数调用后会执行下一个生命周期函数，否则动画用不结束。