Vue 过渡动画实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/second_boy/article/details/88146002

本文详细介绍了Vue中的过渡动画，从基本用法到过渡动画的内钩子函数，包括beforeEnter、enter、afterEnter等阶段。还讨论了如何自定义过渡动画，以及结合animate.css库的应用，并展示了在transition-group中实现多个自定义过渡动画的方法。

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

过渡动画

1.简介

vue在插入、更新或者移除DOM的时候，提供了多种不同方式的应用过渡动画
本质上还是使用css3动画：transition，animation

2.基本用法

使用transition组件，将要执行动画的元素包含在该组件内
<transition>
    <p>执行动画的元素</p>
</transition>

3.过渡动画内钩子函数

v-on:before-enter=“beforeEnter” ===> 动画进入之前
v-on:enter=“enter” ===> 动画进入中
v-on:after-enter=“afterEnter” ===> 动画进入之后
v-on:before-leave=“beforeLeave” ===> 动画离开之前
v-on:leave=“leave” ===> 动画离开中
v-on:after-leave=“afterLeave” ===> 动画离开之后

    html用法：
    <transition 
        /* 钩子函数调用方法 */
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:after-enter="afterEnter"
        v-on:before-leave="beforeLeave"
        v-on:leave="leave"
        v-on:after-leave="afterLeave"

        /* 自定义过渡动画css行业写法 */
        enter-active-class="animated bounceInLeft"      ===> 进入动画 enter-active-class:
        leave-active-class="animated bounceOutRight"    ===> 离开动画 leave-active-class:
    >
        <button @click="flag = !flag">点击打开或关闭</button>
        <p class="move" v-show="flag">过渡动画的元素</p>
        
    </transition>

    js部分：
    var vm = new Vue({
        el: "#app",
        data:{
            flag: false
        },
        methods:{
            beforeEnter:function(){
                alert("动画进入之前");
            },
            enter:function(){
                alert("动画进入中");
            },
            afterEnter:function(){
                alert("动画进入之后");
            },
            beforeLeave:function(){
                alert("动画离开之前");
            },
            leave:function(){
                alert("动画离开中");
            },
            afterLeave:function(){
                alert("动画离开之后");
            }
        }
    })

4.自定义过渡动画或使用第三方库 animate.css为例

    html用法：
    <transition 
        /* 自定义过渡动画css行业写法 */
        enter-active-class="animated bounceInLeft"      ===> 进入动画 enter-active-class:
        leave-active-class="animated bounceOutRight"    ===> 离开动画 leave-active-class:
    >
        <button @click="flag = !flag">点击打开或关闭</button>
        <p class="move" v-show="flag">过渡动画的元素</p>
        
    </transition>

    js部分：
    var vm = new Vue({
        el: "#app",
        data:{
            flag: false
        }
    })

5.多个自定义过渡动画 - transition-group

使用transition-group组件，将要执行动画的多个元素包含在该组件内，另外内部每个元素都需要指定一个唯一的key，
key名字可以随便取，唯一即可，用法：transition-group :key="唯一的值"
<transition-group 
    enter-active-class="animated bounceInLeft" 
    leave-active-class="animated bounceOutRight"
>
    <p class="move" v-show="flag" :key="1">{{msg}}</p>
    <p class="move" v-show="flag" :key="2">{{msg}}</p>
</transition-group>