vue动画

Posted 2020-12-10 cuishuangshuang

1、在vue组件中使用动画

　　在进入/离开的过度中，会有6个class切换

　　　　v-enter：定义进入过度的开始状态，在元素被插入之前生效，在元素被插入之后的下一帧移除

　　　　v-enter-active：定义进入过度生效时的状态，在整个进入过度的阶段中应用，在元素被插入之前生效，在过度/动画完成之后移除，这个类可以被用来定义进入过度的过度时间，延迟和曲线函数

　　　　v-enter-to：2.1.8版本及以上，定义进入过度的结束状态，在元素被插入之后下一帧生效

　　　　v-leave：定义离开过度的开始状态，在离开过度被触发时立刻生效，下一帧被移除

　　　　v-leave-active：定义离开过度生效时的状态，在整个离开过度的阶段中应用，在离开过度被触发时立刻生效，可以被用来定义离开过度的事件，延迟，曲线函数

　　　　v-leave-to：2.1.8版本及以上，定义离开过度的结束状态，在离开过度动画结束时触发

 

　　示例1：

　　　　<transtion  name="aa">

　　　　　　<p  v-show="flag">显示或隐藏</p>

　　　　</transtion>

　　　　<button  @click="flag=!flag">开关<button>

　　　　flag :  true

　　　　.aa-enter-active, .aa-leave-active{

　　　　　　transtion: opacity  1s  ease;

　　　　}

　　　　.aa-enter, .aa-leave-to{

　　　　　　opacity: 0

　　　　}

 

　　示例2：　

　　　　<transtion  enter-active-class="active"  leave-active-class="active">

　　　　　　<p  v-show="flag">显示或隐藏</p>

　　　　</transtion>

　　　　<button  @click="flag=!flag">开关<button>

　　　　flag :  true

　　　　.active{

　　　　　　transtion: opacity  1s  ease;

　　　　}