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生命周期钩子的默认前缀，如果<transition>标签中有命名，如:

<transition name="fade">
</transition>

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

<style>
            /* opacity指的是元素的不透明性，整个动画就是元素透明到不透明的过渡 */
            .fade-enter-active,.fade-leave-active{
                transition: opacity 3s;
            }
            .fade-enter,.fade-leave-to{
                opacity: 0;
            }
</style>
<div id="root">
       <transition name="fade">
             <div v-show="show">Hello World css动画</div>
       </transition>
       <button @click="handleClick">启动</button>
</div>

在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类型的动画，使用它需要通过<link>标签导入他们的库

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

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监听的动画类型，设置的是哪种就会以哪种的持续时间为主，或者也可以手动设置持续事间

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">
  <transition
    :duration="1000"
  >
    <p v-if="show">hello</p>
  </transition>
</div>
或者
<div id="example-3">
  <transition
    :duration="{enter:3000,leave:5000}"
  >
    <p v-if="show">hello</p>
  </transition>
</div>