一、动画实现方式

在Vue中 有三种动画的实现方式 分别是：

• 使用过渡类名实现
• 使用第三方animate.css实现
• 使用钩子函数实现

下面将一一介绍：

1、使用过渡类名实现

首先 来了解一下动画的过渡类名：

( 这是我在Vue官网找到的一个示意图 )

动画 实际上是分成了[ 进入 ]和[ 离开 ]这两部分

每个动画有两个时间点和一个时间段

例如 对于进入(Enter)动画：
两个时间点是v-enter和v-enter-to
一个时间段是v-enter-active

进入 是一个半场动画
退出 也是一个半场动画
两个半场动画组成了一个完整的动画

v-enter和v-leave-to样式是未激活样式 可视为一组
v-enter-to和v-leave样式是激活样式 同样可视为一组

实现步骤

①、首先 使用<transition>标签将需要被动画控制的元素包裹起来

<transition>是Vue提供的一个组件 可以给元素和组件添加进入/离开过渡

<div id="app">
	<input type="button" value="toggle" @click="flag=!flag">
	<transition>
		<h3 v-if="flag">H3</h3>
	</transition>
</div>

②、然后 添加自定义样式来控制<transition>内部的元素 实现动画

为过渡类名设置样式：

• v-enter 动画进入前
• v-enter-to 动画进入后
• v-leave 动画离开前
• v-leave-to 动画离开后
• ========================
• v-enter-active 动画进入的整个过程
• v-leave-active 动画离开的整个过程

<style>
	.v-enter, /* 进入之前元素的起始状态 此时还未开始进入 */
	.v-leave-to /* 动画离开之后的终止状态 此时动画结束 */
	{
		opacity: 0;
		transform: translateX(100px);
	}
	
	.v-enter-active, /* 入场动画的时间段 */
	.v-leave-active /* 离场动画的时间段 */
	{
		transition: all 0.4s ease;
	}
</style>

简单两步 即可使用过渡类名实现动画的效果

自定义前缀

默认的过渡类名带有以v-开头的前缀
可以给<transition>指定一个自定义的name值 作为自定义的前缀

其实 自定义前缀的目的并不是为了个性 也不是为了好看 而是为了区别不同组的动画
因为 在一个页面中可能有不止一个动画 默认的v-过渡类名只能控制一个动画

<!-- 为transition指定name 之后 调用该动画就用该指定的前缀 而不是默认的v-了 -->
<transition name="my">
	<h6 v-if="flag">H3</h6>
</transition>

在设置样式的时候 就可以用自定义的name作为前缀来设置样式了：
比如 我设置的是my 那么就以my作为前缀来设置动画的样式

<style>
	.my-enter, /* 进入之前元素的起始状态 此时还未开始进入 */
	.my-leave-to /* 动画离开之后的终止状态 此时动画结束 */
	{
		opacity: 0;
		transform: translateY(100px);
	}
	
	.my-enter-active, /* 入场动画的时间段 */
	.my-leave-active /* 离场动画的时间段 */
	{
		transition: all 0.4s ease;
	}
</style>

---

2、使用animate.css实现

animate.css是个著名的第三方的动画样式包
因此 使用前需导入css文件
Github地址
官网：Animate.css

cdn：

<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">

既然使用第三方样式 就无须自己再去<style>里设置样式了 直接用现成的
animate.css提供了很多样式 可去官网查询 官网首页自带演示

虽然不用自己写样式 但还是要用<transition>进行包裹
用enter-active-class属性指定入场时的样式类 用leave-active-class属性指定出场时的样式类
另 样式不能直接使用 须在前面加上animated 代表该类是个基本动画类

举个栗子：
入场动画使用bounceIn 离场动画使用bounceOut (这些动画都是自带的)

<div id="app">
	<!-- 样式不能直接使用 须在前面加上animated 代表该类是基本动画类 -->
	<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
		<h3 v-if="flag">H3</h3>
	</transition>
</div>

<transition enter-active-class="bounceIn" leave-active-class="bounceOut">
	<!-- animated类也可以加在元素上面 这样 animated只需写一次了 -->
	<h3 v-if="flag" class="animated">H3</h3>
</transition>

<!-- 使用属性绑定duration 统一设置动画时长(单位:毫秒) -->
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" v-bind:duration="600">
	<h3 v-if="flag" class="animated">H3</h3>
</transition>

<!-- 分别指定入场和离场时间 给duration传递一个对象 -->
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" v-bind:duration="{enter:800,leave:200}">
	<h3 v-if="flag" class="animated">H3</h3>
</transition>

---

3、使用钩子函数实现

此处仅演示半场动画 整个完整的动画就是由两个半场动画组合而成的

半场动画 即意为只有一半的动画
比如 只有进入动画 没有退出动画
或 只有退出动画 没有进入动画

应用场景：动画只需要单程执行的
比如 在购物的时候 点击添加到购物车 然后会有一个红色小球跳到下方的购物车图标中

使用前 需先在属性中声明钩子函数：

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"(若只实现半场动画 则这四个可不用写)
  v-on:leave="leave"(若只实现半场动画 则这四个可不用写)
  v-on:after-leave="afterLeave"(若只实现半场动画 则这四个可不用写)
  v-on:leave-cancelled="leaveCancelled"(若只实现半场动画 则这四个可不用写)
>
  ...
</transition>

然后 就是在Vue实例中写样式方法了

动画钩子函数 也可称作是 动画的生命周期函数

例：
(还是要使用<transition>标签包裹)

<div id="app">
	<!-- @before-enter 进入前 -->
	<!-- @enter 进入时 -->
	<!-- @after-enter 进入后 -->
	<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
		<div class="ball" v-show="flag"></div>
	</transition>
</div>

有两个需要注意的地方：

• 1、需要使用el.offsetWidth强制动画刷新 若不写 则无法显示动画效果
  当然 offsetHeight offsetTop offsetLeft也行 只要跟offset有关的都可以
• 2、要在enter方法中调用done() 代表动画的结束
  这个done其实就是afterEnter对函数的引用
  当只用JavaScript过渡的时候 在enter和leave中必须使用done进行回调 否则它们将被同步调用 过渡会立即完成

<script>
  var vm=new Vue({
     el:'#app',
     data:{
         flag:false
     },
     methods:{
         // 参数的el表示指定动画的DOM元素 是个原生的JS DOM对象
         beforeEnter(el)
         {
             // 动画入场前 此时 动画尚未开始 可设置元素的起始样式
             el.style.transform="translate(0,0)";
         },
         enter(el,done)
         {
             // 强制动画刷新 不写无法显示动画效果 offsetHeight offsetTop offsetLeft也行
             el.offsetWidth
             // 动画开始之后的样式 可设置动画完成动画之后的结束状态
             el.style.transform="translate(150px,450px)";
             el.style.transition="all 1s ease";

             // 调用done() 代表动画结束
             done();
         },
         afterEnter(el)
         {
             // 动画完成后
             this.flag=!this.flag;
         }
     }
  });
</script>

---

二、列表动画

列表动画 顾名思义 就是对列表设置的动画

1、在添加列表时设置动画

在实现列表过渡的时候 若需要过渡的元素是通过v-for渲染出来的
则不能使用transition包裹 需使用<transition-group>

<ul>
	<!-- 若要为v-for循环创建的元素设置动画 则必须为每一个元素设置:key属性 -->
	<transition-group>
		<li v-for="item in list" v-bind:key="item.id">
			编号：{{item.id}} === 姓名：{{item.name}}
		</li>
	</transition-group>
</ul>

然后 用过渡类名设置动画的样式即可：

<style>
	.v-enter, /* 进入之前元素的起始状态 此时还未开始进入 */
	.v-leave-to /* 动画离开之后的终止状态 此时动画结束 */
	{
	    opacity: 0;
	    transform: translateY(100px);
	}
	
	.v-enter-active, /* 入场动画的时间段 */
	.v-leave-active /* 离场动画的时间段 */
	{
	    transition: all 0.4s ease;
	}
</style>

---

2、在删除列表时设置动画

<transition-group>
	<li v-for="(item,i) in list" v-bind:key="item.id" @click="del(i)">
		编号：{{item.id}} === 姓名：{{item.name}}
	</li>
</transition-group>

<style>
	.v-enter,
	.v-leave-to
	{
	    opacity: 0;
	    transform: translateY(100px);
	}
	
	.v-enter-active,
	.v-leave-active
	{
	    transition: all 0.4s ease;
	}
</style>

然而 此时删除的时候 被删除的那条数据往下渐变消失
但在移动的过程中还是占着位置 直到全部消失 下面的数据才会填上去

此时 v-move和v-leave-active配合使用 实现列表后续元素渐渐上移的效果
下面的数据也同步往上移动 占据被删除的数据的位置

<style>
	/* 在元素改变定位的过程中应用 */
	.v-move
	{
	    transition: all 0.4s ease;
	}
	.v-leave-active
	{
	    position: absolute;
	}
</style>

此时 由于为v-leave-active设置了position: absolute
被删除的数据在渐变消失的过程中 宽度会异常缩小
解决方法也很简单 给li设置个宽度即可

<style>
	li
	{
		width: 100%;
	}
</style>

---

3、初始动画

除此之外 还可实现刚加载进入页面时 所有列表渐变移动进入的效果
给<transition-group>标签加个appear属性即可 其它什么都不用设置

<transition-group appear>
	<li v-for="(item,i) in list" v-bind:key="item.id" @click="del(i)">
		编号：{{item.id}} === 姓名：{{item.name}}
	</li>
</transition-group>

---

4、<transition-group>标签的渲染

Vue默认会将<transition-group>标签渲染成一个<span>标签
即 代码里明明写的是<transition-group>标签 然鹅在页面上显示的是<span>标签

可在<transition-group>标签上添加tag属性 指定要渲染成的元素
若不指定 则会默认渲染成span标签

例：
tag=“ul” 意为 指定将<transition-group>渲染成一个ul标签

<transition-group appear tag="ul">
	<li v-for="(item,i) in list" v-bind:key="item.id" @click="del(i)">
		编号：{{item.id}} === 姓名：{{item.name}}
	</li>
</transition-group>

---