5分钟学会Vue动画效果

1.哪些元素/那些组件适合在那些条件下实现动画效果

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

过渡类名

简单例子：（文字隐藏到显示效果）

<div>
  <button @click="show = !show">show toggle</button>
  <transition name="fade">                              //fade 自定义名称
    <p v-if="show">hello</p>
  </transition>
</div>

<style>
.fade-enter-active, .fade-leave-active{                 //指就是html中fade名称
  transition: opacity .5s;                              0.5s动画过渡的时间
}
.fade-enter, .fade-leave-to {           
  opacity: 0;
}
</style>

在线运行

过渡类名参数

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 被删除)，在过渡/动画完成之后移除。

自己画了一个过渡动画生命周期，表示：动画开始，过程，结束，类名生效和失效

隐藏到显示，显示到隐藏过程

css动画

<div>
  <button @click="show = !show">show toggle</button>
  <transition name="fade">  //fade 自定义名称
    <p v-if="show">hello</p>
  </transition>
</div>

<style>
.fade-enter-active {        //类名：隐藏到显示过程所需要的时间
  animation: bounce-in .5s;
}
.fade-leave-active {        //类名：显示到隐藏过程所需要的时间
  animation: bounce-in .5s reverse;     //reverse表示和隐藏到显示动画相反
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

在线运行

自定义过渡的类名

引入第三方css库Animate.css

学到这里，我们其实也可以可以引用第三方库来实现这效果，Animate.css

// 在index.html文件下引入Animate.css
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
// 在组件内
<div>
  <button @click="show = !show">show toggle</button>
  <transition  
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight" >
    <p v-if="show">hello</p>
  </transition>
</div>

在线运行

接触过css动画，可能会想到一个问题，如果过渡和css动画时间不一致，那么应该要以那个时间为标准

所以就引入下面这个问题你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

也可以设置成显性的过渡持续时间

<transition :duration="{ enter: 500, leave: 800 }">...</transition>     //以毫秒计算

这个方法使用情况，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。

参考资料

Vuejs官方文档