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

本文链接：https://blog.youkuaiyun.com/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(70