Vue过渡动画详解-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaojinguniang/article/details/87875938

本文深入讲解Vue中的过渡动画，包括如何使用transition组件为元素添加进入/离开过渡效果，支持条件渲染、条件展示、动态组件等场景。通过实例演示了不同过渡类的作用，如v-enter、v-enter-active、v-leave等，并介绍了如何自定义类名、使用animate.css库、设置过渡时长及动画效果。

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

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

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

从隐藏状态变成显示状态：

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

从显示状态变成隐藏状态：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的动画</title>
    <script src="vue.js"></script>
    <style>
        .fade-enter{
            opacity: 0;    //从隐藏到显示，第一帧隐藏
        }
        .fade-enter-active{
            transition: opacity 1s;        //监听.fade-enter里面opacity的变化，如果有变化，将过程持续1s
        }
        .fade-leave-to{    ////从显示到隐藏，第二帧隐藏
            opacity: 0;
        }
        .fade-leave-active{
            transition: opacity 1s;      //监听.fade-leave-to里面opacity的变化，如果有变化，将过程持续1s
        }

    </style>
</head>
<body>
<div id="app">
    <transition name="fade">
        <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">改变</button>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods:{
            handleClick:function () {
                this.show=!this.show
            }
        }
    })
</script>

</body>
</html>

将样式合并可得：

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

****************************************************************************************************************************************************

Vue中的动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的动画</title>
    <script src="vue.js"></script>
    <style>
        @keyframes bounce-in {
            0%{
                transform: scale(0) ;
            }
            50%{
                transform: scale(1.5) ;
            }
            100%{
                transform: scale(1) ;
            }
        }
        .v-enter-active{
            transform-origin:left center ;
            animation: bounce-in 1s;
        }
        .v-leave-active{
            transform-origin:left center ;
            animation: bounce-in 1s reverse;
        }
    </style>
</head>
<body>
<div id="app">
    <transition>
        <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">change</button>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods:{
            handleClick:function () {
                this.show=!this.show
            }
        }
    })
</script>

</body>
</html>

也可以自定义类名，参考如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的动画</title>
    <script src="vue.js"></script>
    <style>
        @keyframes bounce-in {
            0%{
                transform: scale(0) ;
            }
            50%{
                transform: scale(1.5) ;
            }
            100%{
                transform: scale(1) ;
            }
        }
        .enter{
            transform-origin:left center ;
            animation: bounce-in 1s;
        }
        .leave{
            transform-origin:left center ;
            animation: bounce-in 1s reverse;
        }
    </style>
</head>
<body>
<div id="app">
    <transition
            enter-active-class="enter"
            leave-active-class="leave"
    >
        <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">change</button>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods:{
            handleClick:function () {
                this.show=!this.show
            }
        }
    })
</script>

</body>
</html>

Vue中使用animate.css库

1.引入animate.css文件

2.使用自定义过渡类名，

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

3.在自定义过渡类名中应该先写animated，然后加入对应的特效类名

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中使用animate.css库</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="animate.css">
</head>
<body>
<div id="app">
    <transition enter-active-class="animated swing" leave-active-class="animated shake">
        <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">change</button>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods:{
            handleClick:function () {
                this.show=!this.show
            }
        }
    })
</script>

</body>
</html>

刷新页面实现动画：

使用appear和appear-active-class

appear:第一次显示有个动画效果

appear-active-class：显示的效果为animated swing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刷新页面也显示动画</title>
    <link rel="stylesheet" href="animate.css">
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <transition
            appear
            enter-active-class="animated swing"
            leave-active-class="animated shake"
            appear-active-class="animated swing"
    >
        <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">change</button>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods:{
            handleClick:function () {
                this.show=!this.show
            }
        }
    })
</script>
</body>
</html>

过渡时长作为总时长

使用 <transition type="transition" > </transition>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在Vue中同时使用过渡和动画</title>
    <link rel="stylesheet" href="animate.css">
    <script src="vue.js"></script>
    <style>
        .fade-enter,.fade-leave-to{
            opacity: 0;
        }
        .fade-enter-active,.fade-leave-active{
            transition: opacity 3s;
        }
    </style>
</head>
<body>
<div id="app">
    <transition
            name="fade"
            type="transition"
            appear
            enter-active-class="animated swing fade-enter-active"
            leave-active-class="animated shake fade-leave-active"
            appear-active-class="animated swing"
    >
        <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">change</button>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods:{
            handleClick:function () {
                this.show=!this.show
            }
        }
    })
</script>

</body>
</html>

自定义动画时长作为总时长

使用 :duration="5000"

注意时间为ms，上述时长为5s

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义动画时长</title>
    <link rel="stylesheet" href="animate.css">
    <script src="vue.js"></script>
    <style>
        .v-enter,.v-leave.to{
            opacity: 0;
        }
        .v-enter-active,.v-leave-active{
            transition: opacity 3s;
        }
    </style>
</head>
<body>
<div id="app">
    <transition
            :duration="5000"
            appear
            enter-active-class="animated swing v-enter-active"
            leave-active-class="animated shake v-leave-active"
            appear-active-class="animated swing"
    >
        <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">change</button>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods:{
            handleClick:function () {
                this.show=!this.show
            }
        }
    })
</script>
</body>
</html>

也可以使用对象的方式分别定义入场和出场的时长