Vue学习笔记（三）（动画和过渡）

1，transition的enter和leave
transition动画里会有六个生命周期钩子函数：
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
v-是transition生命周期钩子的默认前缀，如果标签中有命名，如:

那么v-需要改成fade-，如以下代码：

       
             
Hello World css动画
       
       启动

在enter-active中加入transition：opacity表示将监视opacity的变化，只有opacity发生变化才会开始动画的效果，由于v-enter-active监视整个动画的起始和结束，v-enter在元素插入之前就生效了，此时定义d额opacity为0，在第二帧时v-enter被移除，v-enter-to生效，此时opacity为1，这个时候v-enter-active检测到opacity发生了变化，动画就开始了

2，animate.css动画
animate.css是@keyframe类型的动画，使用它需要通过标签导入他们的库

  
    Toggle render
  
  
    
hello
  

enter-active-class和leave-active-class是自定义的过渡类名，另外四个是enter-class、enter-to-class、leave-class、leave-to-class
animated指的就是animate.css的库，tada和bounceOutRight则是这个库里具体的动画名

3，同时使用过渡和动画
过渡和动画可以同时使用，但这里会涉及到一个问题就是两种动画的持续事件有可能并不相同，有可能动画已经结束了过渡还没完成，因此需要使用type这个属性设置“animation”或者“transition”来指定需要Vue监听的动画类型，设置的是哪种就会以哪种的持续时间为主，或者也可以手动设置持续事间

  
    
hello
  

或者

  
    
hello