Vue从入门到精通-10-Vue动画【两万字长文，感谢支持】

最新推荐文章于 2024-08-29 19:30:00 发布
最新推荐文章于 2024-08-29 19:30:00 发布
阅读量1.2k 收藏 23
点赞数 23
分类专栏： Vue教程 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76926204/article/details/138423271
版权

前言

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

使用过渡类名实现动画

官方文档的截图

过渡类名如下：

动画进入：

  • 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等进行动画的定义。

运行效果如下：

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>

效果如下：

修改过渡类名的前缀

在上一小段中，.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>

运行效果如下：

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

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>
 ​

运行效果如下：

改进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>

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

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

注意1：

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

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

注意2：

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

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>

运行效果如下：

改进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>

运行效果如下：

改进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>

运行效果如下：

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>

改进：transition-group的tag属性

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

这个<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>

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

希望各位可以点个赞点个关注，这对up真的很重要，谢谢大家啦！

被瞧不起的神
关注
专栏目录
Vue动画详解
qq_52717952的博客
05-10 673
Vue动画详解Vue动画详解Vue插入Vue动画transform变形 Vue动画详解 Vue插入 1、前言 Vue在插入、更新或者移除DOM时，提供了多种不同方式的应用过渡效果。包括以下工具： . 在CSS过渡和动画中自动应用class . 可以配合使用第三方CSS动画库，如：Animate.css . 在过渡钩子函数中使用JavaScript直接操作DOM . 配合使用第三方JavaScript动画库，如：Velocity.js 2、过渡或动画的了解 Vue提供了transition的封装组件，
「五千字长文」手把手带你优化Vue项目打包体积、提高首屏渲染速度（附demo项目github地址
发果叁
10-17 435
linear、ease、ease-in等steps、step-end等其中steps很少会被用到，而内置关键字其实只是几个典型的贝塞尔曲线，所以我们下面主要篇幅会用来讲解贝塞尔曲线。时间函数乍看可能较为复杂，但是层层解剖后，可以看到每个点其实都还好。借助时间函数，我们可以更好的提升动画的效果，完善动画的细节。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
Vue 中的几种动画效果
徐师兄的博客
06-10 3228
在使用transition组件时，我们可以使用和属性来自定义过渡类名。例如，我们可以这样写一个自定义过渡类名的例子：</</在上面的例子中，我们使用了和属性来自定义过渡类名。这些属性可以让我们更加灵活地控制过渡效果的细节。
22.vue学习篇-过渡&动画
最新发布
qq_34334992的博客
08-29 839
问题：在JS里面实现元素的过渡动画，有哪几种思路？1. JS操作style，transition: all 1s ease(缓动随意)2. JS操作className，切换类名-[在不用第三方库的时候，最推荐这个方法，vue源码也是用的这个方法实现]vue源码中，通过这个方法实现transitionstart方法，transitionend方法，监听过渡是否完成3. JS代码，结合requestAnimationFrame4. 结合第三方库，比较多的用gsap，velocity.js类库。
003 Vue动画
weixin_30821731的博客
08-24 183
一： 0.说明 　　在进入/离开的过渡中，会有 6 个 class 切换。 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 ...
vue-动画
m0_53614495的博客
09-23 5892
Vue过渡动画的核心原理依然是采用css类是实现的，只是vue帮助我们在组件的不同生命周期自定切换不同的css类。Vue中默认提供一个名为transition的内置组件，可以用其来包装要展示过渡动画的组件。transition组件的name属性用来设置要执行的动画名称，Vue中约定了一系列css类名规则来定义各个过渡过程中的组件状态。x-enter-from类在组件即将被插入页面时添加到组件上，可以理解为组件的初始状态。
vue动画
gaoyan426926的博客
03-29 6550
补充vue动画：在vue中，显示隐藏，创建移除，一个元素或者一个组件的时候，可以通过transition实现动画。 6个状态对应6个类名： 进入（显示，创建） v-enter-from 进入前 （vue2.0 v-enter） v-enter-active 进入中 v-enter-to 进入后 离开（隐藏，移除） v-leave-from 进入前 （vue2.0 v-leave） v-leave-active 进入中 v-leave-to 进入后 多个transition使
2020年零基础前端学习路线（本人亲身经历，9个月拿到拼多多、美团、京东校招offer，5000字长文）
热门推荐
前端彭于晏的博客
12-01 8万+
前端学习路线 基础准备 开发工具 结论：vscode 最初我选择的是Hbuilder，轻量级，界面淡黄色和绿色结合比较护眼，但是插件较少，格式化代码以及快捷键用着不是特别顺手，转而使用vscode。 个人认识业界使用比较多的两种编辑器，vscode 和 webstorm。 具体的对比请移步VSCode 与 WebStorm 横向对比 个人想法，其实真没必要对于编辑器过于纠结，毕竟只是一个工具，大佬用txt都可以编写代码，在前期学习阶段可以选定一个坚持使用，等到学有所成，对于编辑器有着个人更独特的要求再去选择
【Vue3.0实战逐步深入系列】使用elementui组件库element-plus美化投票功能
lixiaosenlin的专栏
11-20 2579
前言 小伙伴们大家好。前面一篇文章中我们利用vue3.0实现了一个超级简单的投票功能，虽然功能是实现了也达到了巩固vue3.0知识点的目的，但是页面没有添加任何样式也没有进行任何的UI设计，因此页面很丑。前端作为一个项目的门面是万万不能少了样式和ui设计的，因而本篇文章就将在上一篇的基础上添加一些样式，引用一些新的UI组件库。 先来看下优化前后的效果草图，实际页面更好看一点 element-plus 本着尽可能少的写样式我们本次案例中引用了elementui的UI组件库，我们用的是vue3.0，因此
【Vue3.0实战逐步深入系列】vue3.0获取问卷调查结果并输出到控制台
lixiaosenlin的专栏
11-24 3248
前言 hello，小伙伴们大家好。昨天我们对最初的投票功能做了一个简单的扩展：实现了一个简单的问卷调查功能。在实现该问卷功能时，我们分别封装了几个不同类型的组件：投票组件，单选组件，多选组件，输入组件和评分组件。不知有没有小伙伴发现，虽然问卷的大部分功能都实现了，问卷主题可自由配置，用户也可以进行点选输入填写问卷，但最后问卷填写完成后发现点击提交按钮并没有反应，那岂不是白操作了一顿？没错该问卷还少了个提交功能，接下来我们就把问卷的提交功能补齐，同时对App.vue组件进行一个简单的优化。 给自定义问卷组
【Vue3.0实战逐步深入系列】为问卷列表添加查看详情及删除记录功能
lixiaosenlin的专栏
11-29 1558
【千字长文，熬夜更新，原创不易，多多支持，感谢大家】 前言 Hello，小伙伴们大家好。我们继续来完善问卷调查功能。今天依然还是从问卷提交记录页面上做文章。前面的分享中我们已经实现了提交记录的列表展示功能，但仅仅一个列表展示还是不够的，因为列表中无法显示更多的信息（比如问卷详情）。下面我们就基于列表实现一个点击标题跳转到问卷详情页（结果页）和删除问卷的功能。 列表页改造 先来看看我们列表页要增加的功能： 点击标题跳转到详情页 点击某条记录实现删除问卷 基于以上两点我们就知道该从何下手了 首先.
前端与移动开发之vue-day2（5）
weixin_33670713的博客
11-15 136
使用过渡类名HTML结构： <div id="app"> <input type="button" value="动起来" @click="myAnimate"> <!-- 使用 transition 将需要过渡的元素包裹起来 --> <transition name="fade"> <div v-show=...
Vue动画
小牛牛的博客
03-03 771
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
Vuex学习（四）
反手一个bug的博客
11-22 209
Vue动画 写了一个比较基础的实例 Vue.html &lt;div id="app"&gt; &lt;button v-on:click="show=!show"&gt;点我渐变&lt;/button&gt; &lt;transition name="fade"&gt; &lt;p v-show="show" v-bind:
vue基础：Vue动画
jayLog的博客
03-07 1万+
本文将围绕是什么、有什么用、怎么用的话题，讲讲vue动画的特点和如何使用
vue的动画
hjh15827475896的博客
10-16 609
vue的动画可以分为两种 一种是动画效果, 另一种叫过渡效果 当然, 如果不使用 vue 的动画, 我们自己来使用 css3 写出一个关键帧动画, 也是可以的 要使用vue 的动画, 我们首先要在, 动画的元素上面 加上 transition 在 transition元素上, 可以添加 name 为动画指定一个标识 appear 设置节点在初始渲染的过渡 如果 appear = true 表示在页面 第一次加载的时候就使用动画 下面来展示一下 第一种动画效果的代码 上面的代码属于关键帧的动画
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

被瞧不起的神

谢谢啦，感谢支持|一起努力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值