前语

动画的作用：进步用户的体会，帮助用户更好的了解页面中的功用。

运用过渡类名完结动画

官方文档的截图

过渡类名如下：

10-Vue动画

动画进入：

  • 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、引进：

假如咱们不运用动画，应该是这样做：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 需求： 点击按钮，让 h3 显现，再点击，让 h3 躲藏 -->
        <h3 v-if="flag">这是一个H3</h3>
    </div>
    <script>
        // 创立 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        });
    </script>
</body>
</html>

2、运用动画：（经过Vue的过渡类名来完结）

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
    <!-- 2. 自界说两组款式，来操控 transition 内部的元素完结动画 -->
    <style>
        /* v-enter 【这是一个时刻点】 是进入之前，元素的开端状况，此刻还没有开端进入 */
        /* v-leave-to 【这是一个时刻点】 是动画脱离之后，脱离的停止状况，此刻，元素 动画现已完毕了 */
        .v-enter,
        .v-leave-to {
            opacity: 0;
        }
        /* v-enter-active 【进场动画的时刻段】 */
        /* v-leave-active 【离场动画的时刻段】 */
        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease;   /*期间，设置过渡的特点：all表明一切的特点、时刻为1秒、过渡的状况*/
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 需求： 点击按钮，让 h3 显现，再点击，让 h3 躲藏 -->
        <!-- 1. 运用 transition 元素，把 需求被动画操控的元素，包裹起来 -->
        <!-- transition 元素，是 Vue 官方供给的 -->
        <transition>
            <h3 v-if="flag">这是一个H3</h3>
        </transition>
    </div>
    <script>
        // 创立 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        });
    </script>
</body>
</html>

上方代码中，咱们运用vue供给的<transition>标签把需求被动画操控的元素，包裹起来；然后运用.v-enter、.v-leave-to等进行动画的界说。

运转作用如下：

10-Vue动画

3、再加一个 transform 特点进行位移：

咱们在上方代码的基础之上，加一个 transform 特点，让动画有一个位移的作用。完好代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
    <!-- 2. 自界说两组款式，来操控 transition 内部的元素完结动画 -->
    <style>
        /* v-enter 【这是一个时刻点】 是进入之前，元素的开端状况，此刻还没有开端进入 */
        /* v-leave-to 【这是一个时刻点】 是动画脱离之后，脱离的停止状况，此刻，元素 动画现已完毕了 */
        .v-enter,
        .v-leave-to {
            opacity: 0;
            /* 在动画中参加位移 */
            transform: translateX(80px); /* smyhvae提示：v-enter表明，一开端让DOM元素处于靠右80px的方位 */
        }
        /* v-enter-active 【进场动画的时刻段】 */
        /* v-leave-active 【离场动画的时刻段】 */
        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease;   /*期间，设置过渡的特点：all表明一切的特点、时刻为1秒、过渡的状况*/
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 需求： 点击按钮，让 h3 显现，再点击，让 h3 躲藏 -->
        <!-- 1. 运用 transition 元素，把 需求被动画操控的元素，包裹起来 -->
        <!-- transition 元素，是 Vue 官方供给的 -->
        <transition>
            <h3 v-if="flag">这是一个H3</h3>
        </transition>
    </div>
    <script>
        // 创立 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        });
    </script>
</body>
</html>

作用如下：

10-Vue动画

修改过渡类名的前缀

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

那假如咱们想把两个DOM元素的动画进行分隔界说，该怎么做呢？这儿，咱们能够经过修改过渡类名的前缀来做。比如：

榜首步：（自界说别号）

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

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

第二步：（咱们就能够运用 my-enter、.my-leave-to这些类名了）

    .my-enter,
    .my-leave-to {
      opacity: 0;
      transform: translateY(70px);
    }

完好代码举例如下；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        /* 自界说榜首组款式，来操控 transition 内部的元素完结动画 */
        /* v-enter 【这是一个时刻点】 是进入之前，元素的开端状况，此刻还没有开端进入 */
        /* v-leave-to 【这是一个时刻点】 是动画脱离之后，脱离的停止状况，此刻，元素 动画现已完毕了 */
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(150px);
        }
        /* v-enter-active 【进场动画的时刻段】 */
        /* v-leave-active 【离场动画的时刻段】 */
        .v-enter-active,
        .v-leave-active {
            transition: all 0.8s ease;
        }
        /* 自界说第二组款式，来操控 transition 内部的元素完结动画。这次，咱们经过自己起的别号`name`来作为指令 */
        .my-enter,
        .my-leave-to {
            opacity: 0;
            transform: translateY(70px);
        }
        .my-enter-active,
        .my-leave-active {
            transition: all 1s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 榜首组 -->
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 运用 transition 元素，把 需求被动画操控的元素 h3，包裹起来 -->
        <!-- transition 元素，是 Vue 官方供给的 -->
        <transition>
            <h3 v-if="flag">这是一个H3</h3>
        </transition>
        <hr>
        <!-- 第二组 -->
        <input type="button" value="toggle2" @click="flag2=!flag2">
        <!-- 运用 transition 元素，把 需求被动画操控的元素 h6，包裹起来 -->
        <!-- transition 元素，是 Vue 官方供给的 -->
        <!-- 【重点】在这儿，咱们给这个transition界说一个别号，叫`name`，然后，咱们就能够经过 `.my-enter`等 来界说动画的款式【重要】 -->
        <transition name="my">
            <h6 v-if="flag2">这是一个H6</h6>
        </transition>
    </div>
    <script>
        // 创立 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,
                flag2: false
            },
            methods: {}
        });
    </script>
</body>
</html>

运转作用如下：

10-Vue动画

运用第三方animate.css类库完结动画

animate.css网址：

  • 官方网站：daneden.github.io/animate.css…

代码举例：

下面的代码中，咱们运用animate.css供给的bounceIn、bounceOut这两个类来做进场、离场的动画。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
    <link rel="stylesheet" href="animate3.6.0.css">
    <!-- 进场 bounceIn    离场 bounceOut -->
</head>
<body>
    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 需求： 点击按钮，让 h3 显现，再点击，让 h3 躲藏 -->
        <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
            <h3 v-if="flag">这是一个H3</h3>
        </transition>
    </div>
    <script>
        // 创立 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        });
    </script>
</body>
</html>

上面的代码中，留意：

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

留意2：bounceIn、bounceOut这两个类不能直接运用，要在前面加上animated这个类；不然动画是不会生效的。当然，上面的代码中，咱们还能够把class = animated这个代码移到<h3>标签里，作用是相同的，如下：

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

运转作用如下：

10-Vue动画

改善1：（一致设置进场、进场动画的持续时刻）

咱们把上面的代码改善一下，假如咱们想给进场、进场动画设置持续的时刻，能够运用:duration来做。如下：

        <!-- 需求： 点击按钮，让 h3 显现，再点击，让 h3 躲藏 -->
        <!-- 运用 :duration="毫秒值" 来一致设置 进场 和 离场 时分的动画时长 -->
        <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="500">
            <h3 v-if="flag">这是一个H3</h3>
        </transition>

改善2：（分别设置进场、进场动画的持续时刻）

        <!-- 需求： 点击按钮，让 h3 显现，再点击，让 h3 躲藏 -->
        <!-- 运用  :duration="{ enter: 1000, leave: 300 }"  来分别设置 进场的时长 和 离场的时长  -->
        <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="{ enter: 1000, leave: 300 }">
            <h3 v-if="flag">这是一个H3</h3>
        </transition>

钩子函数完结半场动画

只要进场动画、没有离场动画，这种便是属于半场动画。比如你把一件商品参加保藏，会呈现一个动画；当再次点击保藏按钮的时分却看不到动画作用，这就说明，只要前一半才有动画。

半场动画，能够运用钩子函数来完结。

动画的钩子函数介绍

能够在特点中声明 JavaScript 钩子函数：（这八个钩子函数能够了解成是动画的生命周期）

<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"
>
  <!-- DOM元素 -->
</transition>

咱们能够这样了解：上面这八个钩子函数（四个进场、四个离场），对应了八个事件，咱们要紧接着在methods中界说八个函数。

假如要界说半场动画，做法是：直接在methods中写进场动画的函数，不写离场动画的函数即可。

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

现在要完结的比如是：点击按钮后，让小球进行移动。完好代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
    <style>
        .ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="参加购物车" @click="flag=!flag">
        <!-- 1. 运用 transition 元素把 小球包裹起来 -->
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {
                // 留意： 动画钩子函数的榜首个参数：el，表明 要履行动画的那个DOM元素，是个原生的 JS DOM对象
                // 咱们能够认为 ， el 是经过 document.getElementById('') 方式获取到的原生JS DOM对象
                beforeEnter(el) {
                    // beforeEnter 表明动画进场之前，此刻，动画没有开端，能够 在 beforeEnter 中，设置元素开端动画之前的开端款式
                    // 设置小球开端动画之前的 开端方位
                    el.style.transform = "translate(0, 0)"   // smyhvae提示：一开端的时分，让小球处于（0，0）的方位
                },
                enter(el, done) {
                    // 【留意1】el.offsetWidth 这句话，没有实践的作用，可是，假如不写，出不来动画作用。能够认为 el.offsetWidth 会强制动画刷新
                    el.offsetWidth
                    // enter 表明动画 开端之后的款式，这儿，能够设置小球完结动画之后的，完毕状况
                    el.style.transform = "translate(150px, 300px)" // smyhvae 提示：让小球从（0，0）移动到 (150px, 300px)
                    el.style.transition = 'all 1s ease'
                    // 【留意2】这儿的 done， 开端便是 afterEnter 这个函数，也便是说：done 是 afterEnter 函数的引用
                    done()
                },
                afterEnter(el) {
                    // 动画完结之后，会调用 afterEnter
                    // console.log('ok')
                    // 动画完毕后，让小球消失（直接让 flag 取反即可）
                    this.flag = !this.flag  // 由于最开端的时分，小球便是处于消失的状况，这行代码能够让小球的动画重新开端
                }
            }
        });
    </script>
</body>
</html>

运转作用如下：（咱们能够用这种动画作用，做类似于“参加购物车”的动画作用）

10-Vue动画

上面的代码中，有两个当地要留意：

留意1：

el.offsetWidth这行代码不能少。尽管这行代码没有实践的意义，可是少了之后，动画作用出不来：

10-Vue动画

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

留意2：

enter()函数里，函数的第二个参数要加上done，函数体的终究一行要写done()，表明当即履行后边的afterEnter()函数；假如没有这个done，则会推迟履行后边的afterEnter()函数：

10-Vue动画

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

当只用 JavaScript 过渡的时分，在enter和leave中有必要运用done进行回调。不然，它们将被同步调用，过渡会当即完结。

运用transition-group元素完结列表动画

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

假如咱们用<transition>把li包裹起来，就会让一切的li都具有了动画，这显然是不可取的。

那该怎么做呢？这儿咱们就能够用transition-group进行包裹。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
    <style>
        li {
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 12px;
            width: 100%;
        }
        li:hover {
            background-color: hotpink;
            transition: all 0.8s ease;  /*鼠标悬停时，呈现背景色。让这个背景色的呈现，也加一个淡入的动画*/
        }
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all 0.6s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <label>
                Id:
                <input type="text" v-model="id">
            </label>
            <label>
                Name:
                <input type="text" v-model="name">
            </label>
            <input type="button" value="增加" @click="add">
        </div>
        <!-- <ul> -->
        <!-- 在完结列表过渡的时分，假如需求过渡的元素，是经过 v-for 循环烘托出来的，不能运用 transition 包裹，需求运用 transitionGroup -->
        <!-- 假如要为 v-for 循环创立的元素设置动画，有必要为每一个 元素 设置 :key 特点 -->
        <transition-group>
            <li v-for="(item, i) in list" :key="item.id">
                {{item.id}} --- {{item.name}}
            </li>
        </transition-group>
        <!-- </ul> -->
    </div>
    <script>
        // 创立 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [
                    { id: 1, name: '赵高' },
                    { id: 2, name: '秦桧' },
                    { id: 3, name: '严嵩' },
                    { id: 4, name: '魏忠贤' }
                ]
            },
            methods: {
                add() {
                    this.list.push({ id: this.id, name: this.name })
                    this.id = this.name = ''
                }
            }
        });
    </script>
</body>
</html>

运转作用如下：

10-Vue动画

改善1：增加删去item的功用

根据上面的代码，咱们来增加删去item的功用，代码本应该是这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
    <style>
        li {
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 12px;
            width: 100%;
        }
        li:hover {
            background-color: hotpink;
            transition: all 0.8s ease;
            /*鼠标悬停时，呈现背景色。让这个背景色的呈现，也加一个淡入的动画*/
        }
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all 0.6s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <label>
                Id:
                <input type="text" v-model="id">
            </label>
            <label>
                Name:
                <input type="text" v-model="name">
            </label>
            <input type="button" value="增加" @click="add">
        </div>
        <!-- <ul> -->
        <!-- 在完结列表过渡的时分，假如需求过渡的元素，是经过 v-for 循环烘托出来的，不能运用 transition 包裹，需求运用 transitionGroup -->
        <!-- 假如要为 v-for 循环创立的元素设置动画，有必要为每一个 元素 设置 :key 特点 -->
        <transition-group>
            <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
                {{item.id}} --- {{item.name}}
            </li>
        </transition-group>
        <!-- </ul> -->
    </div>
    <script>
        // 创立 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [
                    { id: 1, name: '赵高' },
                    { id: 2, name: '秦桧' },
                    { id: 3, name: '严嵩' },
                    { id: 4, name: '魏忠贤' }
                ]
            },
            methods: {
                add() {
                    this.list.push({ id: this.id, name: this.name })
                    this.id = this.name = ''
                },
                del(i) {
                    this.list.splice(i, 1);
                }
            }
        });
    </script>
</body>
</html>

运转作用如下：

10-Vue动画

改善2:：

上图中，咱们发现，当我删去第2个item时，第3、第4个item在往上移动的进程比会较突兀。为了改善这个当地，咱们能够给.v-move、.v-leave-active加一些动画特点。终究，完好版代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
    <style>
        li {
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 12px;
            width: 100%;
        }
        li:hover {
            background-color: hotpink;
            transition: all 0.8s ease;
            /*鼠标悬停时，呈现背景色。让这个背景色的呈现，也加一个淡入的动画*/
        }
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all 0.6s ease;
        }
        /* 下面的 .v-move 和 .v-leave-active 合作运用，能够完结列表后续的元素，渐渐地漂上来的作用 */
        .v-move {
            transition: all 0.6s ease;
        }
        .v-leave-active {
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <label>
                Id:
                <input type="text" v-model="id">
            </label>
            <label>
                Name:
                <input type="text" v-model="name">
            </label>
            <input type="button" value="增加" @click="add">
        </div>
        <!-- <ul> -->
        <!-- 在完结列表过渡的时分，假如需求过渡的元素，是经过 v-for 循环烘托出来的，不能运用 transition 包裹，需求运用 transitionGroup -->
        <!-- 假如要为 v-for 循环创立的元素设置动画，有必要为每一个 元素 设置 :key 特点 -->
        <transition-group>
            <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
                {{item.id}} --- {{item.name}}
            </li>
        </transition-group>
        <!-- </ul> -->
    </div>
    <script>
        // 创立 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [
                    { id: 1, name: '赵高' },
                    { id: 2, name: '秦桧' },
                    { id: 3, name: '严嵩' },
                    { id: 4, name: '魏忠贤' }
                ]
            },
            methods: {
                add() {
                    this.list.push({ id: this.id, name: this.name })
                    this.id = this.name = ''
                },
                del(i) {
                    this.list.splice(i, 1);
                }
            }
        });
    </script>
</body>
</html>

运转作用如下：

10-Vue动画

transition-group中appear和tag特点的作用

咱们能够在上面的代码基础之上，给transition-group加上appear特点，这样的话，能够让transition-group包裹的一切DOM元素在刷新时，有淡入作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
    <style>
        li {
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 12px;
            width: 100%;
        }
        li:hover {
            background-color: hotpink;
            transition: all 0.8s ease;
        }
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all 0.6s ease;
        }
        /* 下面的 .v-move 和 .v-leave-active 合作运用，能够完结列表后续的元素，渐渐地漂上来的作用 */
        .v-move {
            transition: all 0.6s ease;
        }
        .v-leave-active {
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <label>
                Id:
                <input type="text" v-model="id">
            </label>
            <label>
                Name:
                <input type="text" v-model="name">
            </label>
            <input type="button" value="增加" @click="add">
        </div>
        <ul>
            <!-- 在完结列表过渡的时分，假如需求过渡的元素，是经过 v-for 循环烘托出来的，不能运用 transition 包裹，需求运用 transitionGroup -->
            <!-- 假如要为 v-for 循环创立的元素设置动画，有必要为每一个 元素 设置 :key 特点 -->
            <!-- 给 ransition-group 增加 appear 特点，完结页面刚展示出来时分，进场时分的作用 -->
            <!-- 经过 为 transition-group 元素，设置 tag 特点，指定 transition-group 烘托为指定的元素，假如不指定 tag 特点，默许，烘托为 span 标签 -->
            <transition-group appear>
                <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
                    {{item.id}} --- {{item.name}}
                </li>
            </transition-group>
        </ul>
    </div>
    <script>
        // 创立 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [
                    { id: 1, name: '赵高' },
                    { id: 2, name: '秦桧' },
                    { id: 3, name: '严嵩' },
                    { id: 4, name: '魏忠贤' }
                ]
            },
            methods: {
                add() {
                    this.list.push({ id: this.id, name: this.name })
                    this.id = this.name = ''
                },
                del(i) {
                    this.list.splice(i, 1)
                }
            }
        });
    </script>
</body>
</html>

10-Vue动画

改善：transition-group的tag特点

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

10-Vue动画

这个<span>尽管没有太大副作用，可是不符合代码标准。为了解决这个问题，咱们能够经过tag特点给transition-group包谷的元素套上一层<ul>，然后把现有的<ul>注释掉，就能够了。终究代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
    <style>
        li {
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 12px;
            width: 100%;
        }
        li:hover {
            background-color: hotpink;
            transition: all 0.8s ease;
        }
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all 0.6s ease;
        }
        /* 下面的 .v-move 和 .v-leave-active 合作运用，能够完结列表后续的元素，渐渐地漂上来的作用 */
        .v-move {
            transition: all 0.6s ease;
        }
        .v-leave-active {
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <label>
                Id:
                <input type="text" v-model="id">
            </label>
            <label>
                Name:
                <input type="text" v-model="name">
            </label>
            <input type="button" value="增加" @click="add">
        </div>
        <!-- <ul> -->
        <!-- 在完结列表过渡的时分，假如需求过渡的元素，是经过 v-for 循环烘托出来的，不能运用 transition 包裹，需求运用 transitionGroup -->
        <!-- 假如要为 v-for 循环创立的元素设置动画，有必要为每一个 元素 设置 :key 特点 -->
        <!-- 给 ransition-group 增加 appear 特点，完结页面刚展示出来时分，进场时分的作用 -->
        <!-- 经过 为 transition-group 元素，设置 tag 特点，指定 transition-group 烘托为指定的元素，假如不指定 tag 特点，默许，烘托为 span 标签 -->
        <transition-group appear tag="ul">
            <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
                {{item.id}} --- {{item.name}}
            </li>
        </transition-group>
        <!-- </ul> -->
    </div>
    <script>
        // 创立 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [
                    { id: 1, name: '赵高' },
                    { id: 2, name: '秦桧' },
                    { id: 3, name: '严嵩' },
                    { id: 4, name: '魏忠贤' }
                ]
            },
            methods: {
                add() {
                    this.list.push({ id: this.id, name: this.name })
                    this.id = this.name = ''
                },
                del(i) {
                    this.list.splice(i, 1)
                }
            }
        });
    </script>
</body>
</html>

这样的话，审查元素的作用如下：

10-Vue动画