10-Vue动画

前言

动画的作用：提高用户的体验，帮助用户更好的理解页面中的功能。

使用过渡类名实现动画

官方文档的截图

过渡类名如下：

10-Vue动画 - 图1

动画进入：

  • v-enter：动画进入之前的初始状态

  • v-enter-to：动画进入之后的结束状态

  • v-enter-active：动画进入的时间段

PS：第一、第二个是时间点；第三个是时间段。

动画离开：

  • v-leave：动画离开之前的初始状态

  • v-leave-to：动画离开之后的结束状态

  • v-leave-active：动画离开的时间段

PS：第一、第二个是时间点；第三个是时间段。

使用举例（通过Vue的过渡类名来实现）

v-enter-to和v-leave的状态是一样的。而且一般来说，v-enter和v-leave-to的状态也是一致的。所以，我们可以把这四个状态写成两组。

现在我们来做个例子：点击按钮时，让div显示/隐藏。

1、引入：

如果我们不使用动画，应该是这样做：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10. </head>
  12. <body>
  13.     <div id="app">
  14.         <input type="button" value="toggle" @click="flag=!flag">
  15.         <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
  16.         <h3 v-if="flag">这是一个H3</h3>
  17.     </div>
  19.     <script>
  20.         // 创建 Vue 实例，得到 ViewModel
  21.         var vm = new Vue({
  22.             el: '#app',
  23.             data: {
  24.                 flag: false
  25.             },
  26.             methods: {}
  27.         });
  28.     </script>
  29. </body>
  31. </html>

2、使用动画：（通过Vue的过渡类名来实现）

现在，我们加淡入淡出的动画，让div显示和隐藏。代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10.     <!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 -->
  11.     <style>
  12.         /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
  14.         /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
  16.         .v-enter,
  17.         .v-leave-to {
  18.             opacity: 0;
  19.         }
  21.         /* v-enter-active 【入场动画的时间段】 */
  23.         /* v-leave-active 【离场动画的时间段】 */
  25.         .v-enter-active,
  26.         .v-leave-active {
  27.             transition: all 1s ease;   /*期间，设置过渡的属性：all表示所有的属性、时间为1秒、过渡的状态*/
  28.         }
  29.     </style>
  30. </head>
  32. <body>
  33.     <div id="app">
  34.         <input type="button" value="toggle" @click="flag=!flag">
  35.         <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
  36.         <!-- 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来 -->
  37.         <!-- transition 元素，是 Vue 官方提供的 -->
  38.         <transition>
  39.             <h3 v-if="flag">这是一个H3</h3>
  40.         </transition>
  41.     </div>
  43.     <script>
  44.         // 创建 Vue 实例，得到 ViewModel
  45.         var vm = new Vue({
  46.             el: '#app',
  47.             data: {
  48.                 flag: false
  49.             },
  50.             methods: {}
  51.         });
  52.     </script>
  53. </body>
  55. </html>

上方代码中，我们使用vue提供的<transition>标签把需要被动画控制的元素，包裹起来；然后使用.v-enter、.v-leave-to等进行动画的定义。

运行效果如下：

10-Vue动画 - 图2

3、再加一个 transform 属性进行位移：

我们在上方代码的基础之上，加一个 transform 属性，让动画有一个位移的效果。完整代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10.     <!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 -->
  11.     <style>
  12.         /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
  14.         /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
  16.         .v-enter,
  17.         .v-leave-to {
  18.             opacity: 0;
  19.             /* 在动画中加入位移 */
  20.             transform: translateX(80px); /* smyhvae提示：v-enter表示，一开始让DOM元素处于靠右80px的位置 */
  21.         }
  23.         /* v-enter-active 【入场动画的时间段】 */
  25.         /* v-leave-active 【离场动画的时间段】 */
  27.         .v-enter-active,
  28.         .v-leave-active {
  29.             transition: all 1s ease;   /*期间，设置过渡的属性：all表示所有的属性、时间为1秒、过渡的状态*/
  30.         }
  31.     </style>
  32. </head>
  34. <body>
  35.     <div id="app">
  36.         <input type="button" value="toggle" @click="flag=!flag">
  37.         <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
  38.         <!-- 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来 -->
  39.         <!-- transition 元素，是 Vue 官方提供的 -->
  40.         <transition>
  41.             <h3 v-if="flag">这是一个H3</h3>
  42.         </transition>
  43.     </div>
  45.     <script>
  46.         // 创建 Vue 实例，得到 ViewModel
  47.         var vm = new Vue({
  48.             el: '#app',
  49.             data: {
  50.                 flag: false
  51.             },
  52.             methods: {}
  53.         });
  54.     </script>
  55. </body>
  57. </html>

效果如下：

10-Vue动画 - 图3

修改过渡类名的前缀

在上一小段中，.v-enter、.v-leave-to这些过渡类名都是以v-开头的。这样做，会有一个局限性：假设有两个DOM元素都用<transition>进行了包裹，那这两个DOM元素就都具备了v-中所定义的动画。

那如果我们想把两个DOM元素的动画进行分开定义，该怎么做呢？这里，我们可以通过修改过渡类名的前缀来做。比如：

第一步：（自定义别名）

  1.     <transition name="my">
  2.       <h6 v-if="flag2">这是一个H6</h6>
  3.     </transition>

上方代码中，我们加了name="my"。

第二步：（我们就可以使用 my-enter、.my-leave-to这些类名了）

  1.     .my-enter,
  2.     .my-leave-to {
  3.       opacity: 0;
  4.       transform: translateY(70px);
  5.     }

完整代码举例如下；

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="./lib/vue-2.4.0.js"></script>
  10.     <style>
  11.         /* 自定义第一组样式，来控制 transition 内部的元素实现动画 */
  13.         /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
  15.         /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
  17.         .v-enter,
  18.         .v-leave-to {
  19.             opacity: 0;
  20.             transform: translateX(150px);
  21.         }
  23.         /* v-enter-active 【入场动画的时间段】 */
  25.         /* v-leave-active 【离场动画的时间段】 */
  27.         .v-enter-active,
  28.         .v-leave-active {
  29.             transition: all 0.8s ease;
  30.         }
  33.         /* 自定义第二组样式，来控制 transition 内部的元素实现动画。这次，我们通过自己起的别名`name`来作为指令 */
  35.         .my-enter,
  36.         .my-leave-to {
  37.             opacity: 0;
  38.             transform: translateY(70px);
  39.         }
  41.         .my-enter-active,
  42.         .my-leave-active {
  43.             transition: all 1s ease;
  44.         }
  45.     </style>
  46. </head>
  48. <body>
  49.     <div id="app">
  50.         <!-- 第一组 -->
  51.         <input type="button" value="toggle" @click="flag=!flag">
  52.         <!-- 使用 transition 元素，把 需要被动画控制的元素 h3，包裹起来 -->
  53.         <!-- transition 元素，是 Vue 官方提供的 -->
  54.         <transition>
  55.             <h3 v-if="flag">这是一个H3</h3>
  56.         </transition>
  58.         <hr>
  60.         <!-- 第二组 -->
  61.         <input type="button" value="toggle2" @click="flag2=!flag2">
  62.         <!-- 使用 transition 元素，把 需要被动画控制的元素 h6，包裹起来 -->
  63.         <!-- transition 元素，是 Vue 官方提供的 -->
  64.         <!-- 【重点】在这里，我们给这个transition定义一个别名，叫`name`，然后，我们就可以通过 `.my-enter`等 来定义动画的样式【重要】 -->
  65.         <transition name="my">
  66.             <h6 v-if="flag2">这是一个H6</h6>
  67.         </transition>
  68.     </div>
  70.     <script>
  71.         // 创建 Vue 实例，得到 ViewModel
  72.         var vm = new Vue({
  73.             el: '#app',
  74.             data: {
  75.                 flag: false,
  76.                 flag2: false
  77.             },
  78.             methods: {}
  79.         });
  80.     </script>
  81. </body>
  83. </html>

运行效果如下：

10-Vue动画 - 图4

使用第三方animate.css类库实现动画

animate.css网址：

代码举例：

下面的代码中，我们使用animate.css提供的bounceIn、bounceOut这两个类来做入场、离场的动画。代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10.     <link rel="stylesheet" href="animate3.6.0.css">
  11.     <!-- 入场 bounceIn    离场 bounceOut -->
  12. </head>
  14. <body>
  15.     <div id="app">
  16.         <input type="button" value="toggle" @click="flag=!flag">
  17.         <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
  18.         <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
  19.             <h3 v-if="flag">这是一个H3</h3>
  20.         </transition>
  22.     </div>
  24.     <script>
  25.         // 创建 Vue 实例，得到 ViewModel
  26.         var vm = new Vue({
  27.             el: '#app',
  28.             data: {
  29.                 flag: false
  30.             },
  31.             methods: {}
  32.         });
  33.     </script>
  34. </body>
  36. </html>

上面的代码中，注意：

注意1：enter-active-class和leave-active-class这两个类名是Vue动画里的关键词，不能写成自己随意起的类名。

注意2：bounceIn、bounceOut这两个类不能直接使用，要在前面加上animated这个类；否则动画是不会生效的。当然，上面的代码中，我们还可以把class = animated这个代码移到<h3>标签里，效果是一样的，如下：

  1.         <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
  2.         <transition enter-active-class="bounceIn" leave-active-class="bounceOut">
  3.             <h3 v-if="flag" class="animated">这是一个H3</h3>
  4.         </transition>

运行效果如下：

10-Vue动画 - 图5

改进1：（统一设置入场、出场动画的持续时间）

我们把上面的代码改进一下，如果我们想给入场、出场动画设置持续的时间，可以使用:duration来做。如下：

  1.         <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
  2.         <!-- 使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长 -->
  3.         <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="500">
  4.             <h3 v-if="flag">这是一个H3</h3>
  5.         </transition>

改进2：（分别设置入场、出场动画的持续时间）

  1.         <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
  2.         <!-- 使用  :duration="{ enter: 1000, leave: 300 }"  来分别设置 入场的时长 和 离场的时长  -->
  3.         <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="{ enter: 1000, leave: 300 }">
  4.             <h3 v-if="flag">这是一个H3</h3>
  5.         </transition>

钩子函数实现半场动画

只有出场动画、没有离场动画，这种就是属于半场动画。比如你把一件商品加入收藏，会出现一个动画；当再次点击收藏按钮的时候却看不到动画效果，这就说明，只有前一半才有动画。

半场动画，可以使用钩子函数来实现。

动画的钩子函数介绍

可以在属性中声明 JavaScript 钩子函数：（这八个钩子函数可以理解成是动画的生命周期）

  1. <transition
  2.   v-on:before-enter="beforeEnter"
  3.   v-on:enter="enter"
  4.   v-on:after-enter="afterEnter"
  5.   v-on:enter-cancelled="enterCancelled"
  7.   v-on:before-leave="beforeLeave"
  8.   v-on:leave="leave"
  9.   v-on:after-leave="afterLeave"
  10.   v-on:leave-cancelled="leaveCancelled"
  11. >
  12.   <!-- DOM元素 -->
  13. </transition>

我们可以这样理解：上面这八个钩子函数（四个入场、四个离场），对应了八个事件，我们要紧接着在methods中定义八个函数。

如果要定义半场动画，做法是：直接在methods中写入场动画的函数，不写离场动画的函数即可。

举例：使用钩子函数模拟小球半场动画

现在要实现的例子是：点击按钮后，让小球进行移动。完整代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10.     <style>
  11.         .ball {
  12.             width: 15px;
  13.             height: 15px;
  14.             border-radius: 50%;
  15.             background-color: red;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21.     <div id="app">
  22.         <input type="button" value="加入购物车" @click="flag=!flag">
  23.         <!-- 1. 使用 transition 元素把 小球包裹起来 -->
  24.         <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
  25.             <div class="ball" v-show="flag"></div>
  26.         </transition>
  27.     </div>
  29.     <script>
  31.         var vm = new Vue({
  32.             el: '#app',
  33.             data: {
  34.                 flag: false
  35.             },
  36.             methods: {
  37.                 // 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
  38.                 // 我们可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
  39.                 beforeEnter(el) {
  40.                     // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
  41.                     // 设置小球开始动画之前的 起始位置
  42.                     el.style.transform = "translate(0, 0)"   // smyhvae提示：一开始的时候，让小球处于（0，0）的位置
  43.                 },
  44.                 enter(el, done) {
  45.                     // 【注意1】el.offsetWidth 这句话，没有实际的作用，但是，如果不写，出不来动画效果。可以认为 el.offsetWidth 会强制动画刷新
  46.                     el.offsetWidth
  47.                     // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
  48.                     el.style.transform = "translate(150px, 300px)" // smyhvae 提示：让小球从（0，0）移动到 (150px, 300px)
  49.                     el.style.transition = 'all 1s ease'
  51.                     // 【注意2】这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
  52.                     done()
  53.                 },
  54.                 afterEnter(el) {
  55.                     // 动画完成之后，会调用 afterEnter
  56.                     // console.log('ok')
  57.                     // 动画结束后，让小球消失（直接让 flag 取反即可）
  58.                     this.flag = !this.flag  // 因为最开始的时候，小球就是处于消失的状态，这行代码可以让小球的动画重新开始
  59.                 }
  60.             }
  61.         });
  62.     </script>
  63. </body>
  65. </html>

运行效果如下：（我们可以用这种动画效果，做类似于“加入购物车”的动画效果）

10-Vue动画 - 图6

上面的代码中，有两个地方要注意：

注意1：

el.offsetWidth这行代码不能少。虽然这行代码没有实际的意义，但是少了之后，动画效果出不来：

10-Vue动画 - 图7

当然，我们也可以把这行代码换成el.offsetHeight、el.offsetLeft、el.offsetTop之类的，只要包含了offset就行。

注意2：

enter()函数里，函数的第二个参数要加上done，函数体的最后一行要写done()，表示立即执行后面的afterEnter()函数；如果没有这个done，则会延迟执行后面的afterEnter()函数：

10-Vue动画 - 图8

Vue官方文档的解释是这样：

当只用 JavaScript 过渡的时候，在enter和leave中必须使用done进行回调。否则，它们将被同步调用，过渡会立即完成。

使用transition-group元素实现列表动画

现在的场景是：在一个<ul>列表中，如果我想给指定的某个li添加动画效果，该怎么做呢？（需要声明的是，这些li是用v-for循环进行遍历的）

如果我们用<transition>把li包裹起来，就会让所有的li都具备了动画，这显然是不可取的。

那该怎么做呢？这里我们就可以用transition-group进行包裹。

代码举例1：点击添加按钮后，给新增的 item 加个动画

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10.     <style>
  11.         li {
  12.             border: 1px dashed #999;
  13.             margin: 5px;
  14.             line-height: 35px;
  15.             padding-left: 5px;
  16.             font-size: 12px;
  17.             width: 100%;
  18.         }
  20.         li:hover {
  21.             background-color: hotpink;
  22.             transition: all 0.8s ease;  /*鼠标悬停时，出现背景色。让这个背景色的出现，也加一个淡入的动画*/
  23.         }
  25.         .v-enter,
  26.         .v-leave-to {
  27.             opacity: 0;
  28.             transform: translateY(80px);
  29.         }
  31.         .v-enter-active,
  32.         .v-leave-active {
  33.             transition: all 0.6s ease;
  34.         }
  35.     </style>
  36. </head>
  38. <body>
  39.     <div id="app">
  41.         <div>
  42.             <label>
  43.                 Id:
  44.                 <input type="text" v-model="id">
  45.             </label>
  47.             <label>
  48.                 Name:
  49.                 <input type="text" v-model="name">
  50.             </label>
  52.             <input type="button" value="添加" @click="add">
  53.         </div>
  55.         <!-- <ul> -->
  56.         <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
  57.         <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
  58.         <transition-group>
  59.             <li v-for="(item, i) in list" :key="item.id">
  60.                 {{item.id}} --- {{item.name}}
  61.             </li>
  62.         </transition-group>
  63.         <!-- </ul> -->
  65.     </div>
  67.     <script>
  68.         // 创建 Vue 实例，得到 ViewModel
  69.         var vm = new Vue({
  70.             el: '#app',
  71.             data: {
  72.                 id: '',
  73.                 name: '',
  74.                 list: [
  75.                     { id: 1, name: '赵高' },
  76.                     { id: 2, name: '秦桧' },
  77.                     { id: 3, name: '严嵩' },
  78.                     { id: 4, name: '魏忠贤' }
  79.                 ]
  80.             },
  81.             methods: {
  82.                 add() {
  83.                     this.list.push({ id: this.id, name: this.name })
  84.                     this.id = this.name = ''
  85.                 }
  86.             }
  87.         });
  88.     </script>
  89. </body>
  91. </html>

运行效果如下：

10-Vue动画 - 图9

改进1：添加删除item的功能

基于上面的代码，我们来添加删除item的功能，代码本应该是这样写：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10.     <style>
  11.         li {
  12.             border: 1px dashed #999;
  13.             margin: 5px;
  14.             line-height: 35px;
  15.             padding-left: 5px;
  16.             font-size: 12px;
  17.             width: 100%;
  18.         }
  20.         li:hover {
  21.             background-color: hotpink;
  22.             transition: all 0.8s ease;
  23.             /*鼠标悬停时，出现背景色。让这个背景色的出现，也加一个淡入的动画*/
  24.         }
  26.         .v-enter,
  27.         .v-leave-to {
  28.             opacity: 0;
  29.             transform: translateY(80px);
  30.         }
  32.         .v-enter-active,
  33.         .v-leave-active {
  34.             transition: all 0.6s ease;
  35.         }
  36.     </style>
  37. </head>
  39. <body>
  40.     <div id="app">
  42.         <div>
  43.             <label>
  44.                 Id:
  45.                 <input type="text" v-model="id">
  46.             </label>
  48.             <label>
  49.                 Name:
  50.                 <input type="text" v-model="name">
  51.             </label>
  53.             <input type="button" value="添加" @click="add">
  54.         </div>
  56.         <!-- <ul> -->
  57.         <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
  58.         <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
  59.         <transition-group>
  60.             <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
  61.                 {{item.id}} --- {{item.name}}
  62.             </li>
  63.         </transition-group>
  64.         <!-- </ul> -->
  66.     </div>
  68.     <script>
  69.         // 创建 Vue 实例，得到 ViewModel
  70.         var vm = new Vue({
  71.             el: '#app',
  72.             data: {
  73.                 id: '',
  74.                 name: '',
  75.                 list: [
  76.                     { id: 1, name: '赵高' },
  77.                     { id: 2, name: '秦桧' },
  78.                     { id: 3, name: '严嵩' },
  79.                     { id: 4, name: '魏忠贤' }
  80.                 ]
  81.             },
  82.             methods: {
  83.                 add() {
  84.                     this.list.push({ id: this.id, name: this.name })
  85.                     this.id = this.name = ''
  86.                 },
  87.                 del(i) {
  88.                     this.list.splice(i, 1);
  89.                 }
  90.             }
  91.         });
  92.     </script>
  93. </body>
  95. </html>

运行效果如下：

10-Vue动画 - 图10

改进2:：

上图中，我们发现，当我删除第2个item时，第3、第4个item在往上移动的过程比会较突兀。为了改进这个地方，我们可以给.v-move、.v-leave-active加一些动画属性。最终，完整版代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10.     <style>
  11.         li {
  12.             border: 1px dashed #999;
  13.             margin: 5px;
  14.             line-height: 35px;
  15.             padding-left: 5px;
  16.             font-size: 12px;
  17.             width: 100%;
  18.         }
  20.         li:hover {
  21.             background-color: hotpink;
  22.             transition: all 0.8s ease;
  23.             /*鼠标悬停时，出现背景色。让这个背景色的出现，也加一个淡入的动画*/
  24.         }
  26.         .v-enter,
  27.         .v-leave-to {
  28.             opacity: 0;
  29.             transform: translateY(80px);
  30.         }
  32.         .v-enter-active,
  33.         .v-leave-active {
  34.             transition: all 0.6s ease;
  35.         }
  37.         /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
  38.         .v-move {
  39.             transition: all 0.6s ease;
  40.         }
  42.         .v-leave-active {
  43.             position: absolute;
  44.         }
  45.     </style>
  46. </head>
  48. <body>
  49.     <div id="app">
  51.         <div>
  52.             <label>
  53.                 Id:
  54.                 <input type="text" v-model="id">
  55.             </label>
  57.             <label>
  58.                 Name:
  59.                 <input type="text" v-model="name">
  60.             </label>
  62.             <input type="button" value="添加" @click="add">
  63.         </div>
  65.         <!-- <ul> -->
  66.         <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
  67.         <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
  68.         <transition-group>
  69.             <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
  70.                 {{item.id}} --- {{item.name}}
  71.             </li>
  72.         </transition-group>
  73.         <!-- </ul> -->
  75.     </div>
  77.     <script>
  78.         // 创建 Vue 实例，得到 ViewModel
  79.         var vm = new Vue({
  80.             el: '#app',
  81.             data: {
  82.                 id: '',
  83.                 name: '',
  84.                 list: [
  85.                     { id: 1, name: '赵高' },
  86.                     { id: 2, name: '秦桧' },
  87.                     { id: 3, name: '严嵩' },
  88.                     { id: 4, name: '魏忠贤' }
  89.                 ]
  90.             },
  91.             methods: {
  92.                 add() {
  93.                     this.list.push({ id: this.id, name: this.name })
  94.                     this.id = this.name = ''
  95.                 },
  96.                 del(i) {
  97.                     this.list.splice(i, 1);
  98.                 }
  99.             }
  100.         });
  101.     </script>
  102. </body>
  104. </html>

运行效果如下：

10-Vue动画 - 图11

transition-group中appear和tag属性的作用

我们可以在上面的代码基础之上，给transition-group加上appear属性，这样的话，可以让transition-group包裹的所有DOM元素在刷新时，有淡入效果。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10.     <style>
  11.         li {
  12.             border: 1px dashed #999;
  13.             margin: 5px;
  14.             line-height: 35px;
  15.             padding-left: 5px;
  16.             font-size: 12px;
  17.             width: 100%;
  18.         }
  20.         li:hover {
  21.             background-color: hotpink;
  22.             transition: all 0.8s ease;
  23.         }
  25.         .v-enter,
  26.         .v-leave-to {
  27.             opacity: 0;
  28.             transform: translateY(80px);
  29.         }
  31.         .v-enter-active,
  32.         .v-leave-active {
  33.             transition: all 0.6s ease;
  34.         }
  36.         /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
  38.         .v-move {
  39.             transition: all 0.6s ease;
  40.         }
  42.         .v-leave-active {
  43.             position: absolute;
  44.         }
  45.     </style>
  46. </head>
  48. <body>
  49.     <div id="app">
  51.         <div>
  52.             <label>
  53.                 Id:
  54.                 <input type="text" v-model="id">
  55.             </label>
  57.             <label>
  58.                 Name:
  59.                 <input type="text" v-model="name">
  60.             </label>
  62.             <input type="button" value="添加" @click="add">
  63.         </div>
  65.         <ul>
  66.             <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
  67.             <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
  68.             <!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
  69.             <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
  70.             <transition-group appear>
  71.                 <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
  72.                     {{item.id}} --- {{item.name}}
  73.                 </li>
  74.             </transition-group>
  75.         </ul>
  77.     </div>
  79.     <script>
  80.         // 创建 Vue 实例，得到 ViewModel
  81.         var vm = new Vue({
  82.             el: '#app',
  83.             data: {
  84.                 id: '',
  85.                 name: '',
  86.                 list: [
  87.                     { id: 1, name: '赵高' },
  88.                     { id: 2, name: '秦桧' },
  89.                     { id: 3, name: '严嵩' },
  90.                     { id: 4, name: '魏忠贤' }
  91.                 ]
  92.             },
  93.             methods: {
  94.                 add() {
  95.                     this.list.push({ id: this.id, name: this.name })
  96.                     this.id = this.name = ''
  97.                 },
  98.                 del(i) {
  99.                     this.list.splice(i, 1)
  100.                 }
  101.             }
  102.         });
  103.     </script>
  104. </body>
  106. </html>

10-Vue动画 - 图12

改进：transition-group的tag属性

上面的代码中，我们审查一下代码元素会发现，用transition-group包裹的元素，会被默认套上一层<span>：

10-Vue动画 - 图13

这个<span>虽然没有太大副作用，但是不符合代码规范。为了解决这个问题，我们可以通过tag属性给transition-group包谷的元素套上一层<ul>，然后把现有的<ul>注释掉，就可以了。最终代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10.     <style>
  11.         li {
  12.             border: 1px dashed #999;
  13.             margin: 5px;
  14.             line-height: 35px;
  15.             padding-left: 5px;
  16.             font-size: 12px;
  17.             width: 100%;
  18.         }
  20.         li:hover {
  21.             background-color: hotpink;
  22.             transition: all 0.8s ease;
  23.         }
  27.         .v-enter,
  28.         .v-leave-to {
  29.             opacity: 0;
  30.             transform: translateY(80px);
  31.         }
  33.         .v-enter-active,
  34.         .v-leave-active {
  35.             transition: all 0.6s ease;
  36.         }
  38.         /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
  40.         .v-move {
  41.             transition: all 0.6s ease;
  42.         }
  44.         .v-leave-active {
  45.             position: absolute;
  46.         }
  47.     </style>
  48. </head>
  50. <body>
  51.     <div id="app">
  53.         <div>
  54.             <label>
  55.                 Id:
  56.                 <input type="text" v-model="id">
  57.             </label>
  59.             <label>
  60.                 Name:
  61.                 <input type="text" v-model="name">
  62.             </label>
  64.             <input type="button" value="添加" @click="add">
  65.         </div>
  67.         <!-- <ul> -->
  68.         <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
  69.         <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
  70.         <!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
  71.         <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
  72.         <transition-group appear tag="ul">
  73.             <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
  74.                 {{item.id}} --- {{item.name}}
  75.             </li>
  76.         </transition-group>
  77.         <!-- </ul> -->
  79.     </div>
  81.     <script>
  82.         // 创建 Vue 实例，得到 ViewModel
  83.         var vm = new Vue({
  84.             el: '#app',
  85.             data: {
  86.                 id: '',
  87.                 name: '',
  88.                 list: [
  89.                     { id: 1, name: '赵高' },
  90.                     { id: 2, name: '秦桧' },
  91.                     { id: 3, name: '严嵩' },
  92.                     { id: 4, name: '魏忠贤' }
  93.                 ]
  94.             },
  95.             methods: {
  96.                 add() {
  97.                     this.list.push({ id: this.id, name: this.name })
  98.                     this.id = this.name = ''
  99.                 },
  100.                 del(i) {
  101.                     this.list.splice(i, 1)
  102.                 }
  103.             }
  104.         });
  105.     </script>
  106. </body>
  108. </html>

这样的话，审查元素的效果如下：

10-Vue动画 - 图14