零基础学习 Vue.JS ——（6）过渡与动画_vue.js过渡与动画入门-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40678503/article/details/82379040

本文详细介绍了Vue.js中过渡和动画的实现方法，包括如何使用transition组件添加过渡效果、CSS动画的应用、自定义类名及回调函数的使用。

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

vue.js在插入或者更新DOM元素时，提供了许多不同的过渡方式和动画效果。

过渡效果

transition封装组件可以给任何元素和组件添加过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
        .fade-enter,.fade-leave-to{
            opacity: 0;
        }
        .fade-enter-active,.fade-leave-active{
            transition: all 0.5s;
        }
    </style>
</head>
<body>
<div id="app">
    <p>
        <input type="button" value="click me" @click="show=!show">
    </p>
    <transition name="fade">
        <p v-if="show" v-bind:style="newStyle">
            过渡效果
        </p>
    </transition>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
   el:"#app",
    data:{
       show:true,
        newStyle:{
            color:"blue"
        }
    }
});

show=!show用来切换<p></p>的显示隐藏。

过渡其实就是一个淡入淡出的效果，在隐藏和显示的过渡中，一共有6个class切换

1. v-enter : 在元素被插入前生效，定义进入过渡的开始状态
2. v-enter-active : 定义了过渡生效时的状态，在元素被插入之前生效，在整个的过渡阶段中使用，常用来定义进入
   过渡需要的时间，延迟和曲线函数。
3. v-enter-to : 定义进入过渡的结束状态，过渡完成后移除。（2.1.8版及以上）
4. v-leave : 定义离开过渡的开始状态
5. v-leave-active : 定义了离开过渡生效时的状态，在整个的过渡阶段中使用，常用来定义离开
   过渡需要的时间，延迟和曲线函数。
6. v-leave-to : 定义离开过渡的结束状态，过渡完成后移除。（2.1.8版及以上）

如果你使用的只是<transition>标签，那么v-是这些类名的默认前缀，你只要写v-enter等就可以。

如果你使用的是<transition name="fade">,那么要将v改为fade，也就是写成fade-enter.

动画效果

vue.js是利用CSS的语法实现的动画效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
        @keyframes fly-in {
            0%{
                transform: scale(0);
            }
            50%{
                transform: scale(1.2);
            }
            100%{
                transform: scale(1);
            }
        }
        .fly-enter{
            opacity: 0;
        }
        .fly-leave-to{
            opacity: 0;
        }
        .fly-enter-active{
            animation: fly-in .5s;
        }
        .fly-leave-active{
            animation: fly-in 1s reverse;
        }
    </style>
</head>
<body>
<div id="app">
    <p>
        <input type="button" value="ok" @click="show=!show">
    </p>
    <transition name="fly">
        <p v-if="show">
            hello word!
        </p>
    </transition>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</htm

var app=new Vue({
   el:"#app",
    data:{
       show:false
    }
});

CSS 动画用法和CSS 过渡很类似，但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

我们还可以自定义类名，自定义的类名优先级要高于普通的类名，可以很好的和第三方动画库(animate.css)结合使用
我们可以通过以下的特效来自定义类名
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
</head>
<body>
<div id = "app">
    <button v-on:click = "show = !show">click me</button>
    <transition
            name="custom-classes-transition"
            enter-active-class="animated bounce"
            leave-active-class="animated hinge"
    >
        <p v-if="show">vue动画效果是通过CSS实现的</p>
    </transition>
</div>

<script type = "text/javascript">
    new Vue({
        el: '#app',
        data: {
            show: true
        }
    })
</script>
</body>
</html>

连接网络，查看效果。

可以下载animate.css 链接： animate.css
这里写图片描述

enter-active-class="animated bounce"
将bounce更改为animate.css中的其他类名就会有不同的效果。

回调函数
vue.js为过渡和动画提供了回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
        @keyframes bounce-in {
            0%{
                transform: scale(0);
            }
            50%{
                transform: scale(1.2);
            }
            100%{
                transform: scale(1);
            }
        }
        .bounce-enter{
            opacity: 0;
        }
        .fade-leave-to{
            opacity: 0;
        }
        .bounce-enter-active{
            animation: bounce-in .5s;
        }
        .bounce-leave-active{
            animation: bounce-in .5s reverse;
        }
    </style>
</head>
<body>
<div id="app">
    <p>
        <input type="button" value="ok" @click="show=!show">
    </p>
    <transition name="bounce" @after-enter="test">
        <p v-if="show">
            hello word!
        </p>
    </transition>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</htm

var app=new Vue({
   el:"#app",
    data:{
       show:false
    },
    methods:{
       test:function () {
           alert("播放完毕")
       }
    }
});