Vue过渡动画详解与animate.css结合使用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42839746/article/details/124542157

本文详细介绍了Vue的transition组件在实现过渡与动画中的应用，包括enter和leave阶段的CSS类名切换，以及如何配合animate.css库创建更丰富的动画效果。还讨论了在多个元素过渡时key属性的重要性，以及不同过渡模式的使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、vue过渡与动画概述

1、Vue使用transition组件实现了过渡与动画，Vue的过渡系统可以在元素从DOM中插入或移除时自动应用过渡效果，也提供配合使用第三方 CSS 动画库(如 animate.css)来实现动画效果。

二、transition组件

1、Vue提供了实现过渡动画的内置组件 transition。基本用法就是给我们需要动画的标签外面嵌套 transition 标签，并且给上属性。实现过渡动画一般格式。

<transition>
  <div></div><!--需要动画的div标签-->
</transition>

2、Vue提供了6个CSS类名在enter/leave的过渡中切换。(图示)

Enter（隐藏）

Opacity: 0 -----➤ Opacity: 1

| |

v-enter v-enter-to

| |

---------------------

v-enter-active

Leaver（显示）

Opacity: 1 -----➤ Opacity: 0

| |

v-leave v-leave-to

| |

---------------------

v-leave-active

隐藏：

v-enter：定义进入过渡的开始状态。

v-enter-active：定义进入过渡生效时的状态，在整个进入过渡的阶段中应用。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to：定义进入过渡的结束状态。

显示：

v-leave：定义离开过渡的开始状态。

v-leave-active：定义离开过渡生效时的状态，在整个离开过渡的阶段中应用。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to：定义离开过渡的结束状态。

3、transition组件的使用

<!DOCTYPE html>
<html>
<head>
  <title>transition组件的使用</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="lib/vue.js"></script>
</head>
   <style type="text/css">

    /*  显示leave  到  隐藏leave-to */
    .v-leave{
      opacity: 1  /*这个是默认值，可写可不写*/
    }
    .v-leave-active{
      transition: opacity 1.5s
    }
    .v-leave-to{
       opacity: 0
    }

    /*隐藏enter  到  显示enter-to*/
    .v-enter{
      opacity: 0
    }
    .v-enter-active{
      transition: opacity 1.5s
    }
    .v-enter-to{
      opacity: 1  /*这个是默认值，可写可不写*/
    }
   </style>
<body>
  <div id="app">
    <button @click="toggle()">点击</button>
    <transition>
      <p v-show="issshow">Vue使用transition组件实现了过渡与动画，Vue的过渡系统可以在元素从DOM中插入或移除时自动应用过渡效果，也提供配合使用第三方 CSS 动画库(如 animate.css)来实现动画效果。
          </p>
        </transition>  
  </div>
</body>
   <script type="text/javascript">
    new Vue({
      el:"#app",
      data:{
        issshow:true
      },
      methods:{
        toggle(){  // 此方法是用来控制组件显示与隐藏，可以直接写在按钮里面，例如<button @click="issshow = ! issshow">点击</button>
                this.issshow=!this.issshow
        }
      }
    })
   </script>
</html>

我们可以从第15行的代码transition: opacity 1.5s和第26行的代码transition: opacity 1.5s中看出是一样的，所以他们的类名可以写在一起，即

.v-leave-active,.v-enter-active{
    transition: opacity 1.5s
}

三、过渡的类名

1、如果 transition 组件定义了name（类名）,这时该transition 组件只会使用name（类名）开头的过渡动画。例如： transition 组件定义了类名fade，则该组件使用.fade-leave{opacity: 1},大括号里面的动画效果样式可以在网络上找来写。

2、案例

<!DOCTYPE html>
<html>
<head>
  <title>过渡的类名</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="lib/vue.js"></script>
</head>
<style type="text/css">
  /*  显示leave  到  隐藏leave-to */
  .fade-leave {
    opacity: 1/*这个是默认值，可写可不写*/
  }
  .fade-leave-active {
    transition: opacity 1.5s
  }
  .fade-leave-to {
    opacity: 0
  }

  /*隐藏enter  到  显示enter-to*/
  .fade-enter {
    opacity: 0
  }
  .fade-enter-active {
    transition: opacity 1.5s
  }
  .fade-enter-to {
    opacity: 1/*这个是默认值，可写可不写*/
  }

  /*隐藏enter  到  显示enter-to*/
  .v-enter {
    opacity: 0
  }
  .v-enter-active {
    transition: opacity 1.5s
  }
  .v-enter-to {
    opacity: 1/*这个是默认值，可写可不写*/
  }
</style>

<body>
  <div id="app">

    <button @click="toggle()">点击1(取别名:fade)</button>
    <transition name="fade"><!-- 给这个transition取别名为fade，所以它展示的动画效果为上面的fade-开头的代码动画效果 -->
      <p v-show="issshow">Vue使用transition组件实现了过渡与动画，Vue的过渡系统可以在元素从DOM中插入或animate.css)来实现动画效果。</p>
    </transition>

    <button @click="go()">点击2(不取别名)</button>
    <transition><!-- 若没有取别名，则默认使用v-开头的代码动画效果 -->
      <p v-show="pro">若transition没有取别名，则默认使用v-开头的代码动画效果。</p>
    </transition>

  </div>
</body>
<script type="text/javascript">
  new Vue({
    el: "#app",
    data: {
      issshow: true,
      pro:true
    },
    methods: {
      toggle() {
        this.issshow = !this.issshow
      },
      go(){
        this.pro=!this.pro
      }
    }
  })
</script>
</html>

其中，我给按钮点击1取了类名fade，所以按钮点击1使用fade开头的动画效果，有显示和隐藏的渐变动画效果，但是我没有给按钮点击2取类名，所以按钮点击2默认使用v-开头的动画效果，只有隐藏到显示的动画效果。具体请观看上面的代码案例。

3、常用的过渡使用通常使用 CSS 过渡。在代码中设置 CSS 样式来实现过渡 v-enter-active 、 v-leave-active 、 v-enter 、 v-leave-to 具体请观看上面的代码案例。

4、Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡。

条件渲染 (使用 v-if)、条件展示 (使用 v-show)、动态组件、组件根节点

在进入/离开的过渡中，会有 6 个 class 切换。

四、动画库animate.css（官网：https://animate.style/）

1、在实现动画中会用到自定义过渡类名，可以通过以下特性来自定义过渡类名

enter-class 、leave-class 、enter-to-class 、leave-to-class 、leave-active-class 、enter-active-class 。它们的优先级高于普通的类名，对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 animate.css 相结合使用非常有用。

2、animate.css动画库使用方法：在想有动画的transition标签上面加上 animate__animated 和其他你想要的的动画效果，比如animate__bounce （跳动的动画），就可以实现一个酷炫的CSS动画效果了。

<transition enter-active-class="animate__animated animate__bounce" leave-active-class="animate__animated animate__bounce">

3、animate.css动画库案例

<!DOCTYPE html>
<html>
<head>
  <title>animate.css动画库</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="lib/animate.min.css"><!-- 引用CSS3动画库 -->
  <script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
  <div id="app">

    <button @click="toggle()">点击</button>
    <!-- enter-active-class属性，可以把CSS里面写好的class类调用  当显示的时候 -->
    <!-- leave-active-class属性，可以把CSS里面写好的class类调用  当隐藏的时候 -->
    <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight"><!-- 其中的animated是基础类 -->
      <p v-show="issshow">Vue使用transition组件实现了过渡与动画，Vue的过渡系统可以在元素从DOM中插入或移除时自动应用过渡效果，也提供配合使用第三方 CSS 动画库(如 animate.css)来实现动画效果。</p>
        </transition>

  </div>
</body>
   <script type="text/javascript">
    new Vue({
      el:"#app",
      data:{
        issshow:true
      },
      methods:{
        toggle(){
                this.issshow=!this.issshow
        }
      }
    })
   </script>
</html>

五、多个元素的过渡

1、当有相同标签名的元素切换时，需要通过 key属性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

例如：我们写一个按钮控制文本A隐藏，当文本A隐藏后，紧接着文本B显示，文本A、B用的都是相同的<p>标签，而且我们也给他们设置了动画效果。如果我们不给<p>标签设置唯一的值（key属性），在显示和隐藏的过程中，会失去动画效果。具体请观看一下案例代码。

2、案例

<!DOCTYPE html>
<html>
<head>
  <title>多个元素的过渡</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="lib/animate.min.css"><!-- 引用CSS3动画库 -->
  <script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
  <div id="app">

    <button @click="toggle()">点击</button>
    <!-- enter-active-class属性，可以把CSS里面写好的class类调用  当显示的时候 -->
    <!-- leave-active-class属性，可以把CSS里面写好的class类调用  当隐藏的时候 -->
    <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight" mode="out-in"><!-- 其中的animated是基础类 --> <!-- 元素过度模式in-out：新元素先进行过渡，完成之后当前元素过渡离开。out-in：当前元素先进行过渡，完成之后新元素过渡进入。 -->
      <p v-if="issshow" key="fade">Vue使用transition组件实现了过渡与动画，Vue的过渡系统可以在元素从DOM中插入或移除时自动应用过渡效果，</p> <!-- 当有相同标签名的元素切换时，需要通过 key属性设置唯一的值来标记以让 Vue 区分它们,key的取值可以是任意字符，例如1和2 -->

        <p v-else key="mode">也提供配合使用第三方 CSS 动画库(如 animate.css)来实现动画效果。</p>
        </transition>

  </div>
</body>
   <script type="text/javascript">
    new Vue({
      el:"#app",
      data:{
        issshow:true
      },
      methods:{
        toggle(){
                this.issshow=!this.issshow
        }
      }
    })
   </script>
</html>

3、同时生效的进入和离开的过渡如果不能满足所有要求， Vue 提供了过渡模式。如果没有加入过渡模式，则多个动画将同时生效。

in-out：新元素先进行过渡，完成之后当前元素过渡离开。

out-in：当前元素先进行过渡，完成之后新元素过渡进入。

<transition mode="out-in"><!--这里写入你的代码--></transition>

Vue过渡与动画