29vue学习——为组件切换添加动画效果

最新推荐文章于 2024-07-04 00:07:08 发布

0563xixi

最新推荐文章于 2024-07-04 00:07:08 发布

阅读量2.0k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42530160/article/details/98528355

本文介绍如何在Vue中为组件切换添加动画效果，包括使用transition元素、定义CSS过渡样式及设置mode属性实现平滑过渡。

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

29vue学习——为组件切换添加动画效果

前言：

在前面的两篇文章中我们学习了如何通过 v-if 和 v-else 来实现两个组件之间的切换，通过 component 元素实现两个以上的组件的切换，但是我们还没有给他们的切换添加好看的动画效果呢！这篇文章就让我们来学习如何给组件切换添加动画效果吧！

总代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>组件切换</title>
    <style>
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateX(150px)
        }
        .v-enter-active,.v-leave-active{
            transition: all 0.4s ease;
        }
    </style>
</head>

<body>
    <div class="body">
   
        <input type="button" value="登录" @click="name='login'">
        <input type="button" value="注册" @click="name='register'">
        <input type="button" value="首页" @click="name='index'">
        
        <!-- 有动画效果的 -->
        <!-- 使用 component 元素实现组件之间的切换 -->
        <transition mode="out-in">
            <component :is="name"></component>
        </transition>

    </div>

    <!-- 登录组件 -->
    <template id="login">
        <h3>我是登录组件</h3>
    </template>

    <!-- 注册组件 -->
    <template id="register">
        <h3>我是注册组件</h3>
    </template>

    <!-- 首页组件 -->
    <template id="index">
        <h3>我是首页组件</h3>
    </template>

    <script src="../lib/vue-2.4.0.js"></script>
    <script>
        /* 登录组件 */
        Vue.component("login", {
            template: "#login"
        })
        /* 注册组件 */
        Vue.component("register", {
            template: "#register"
        })
        /* 首页组件 */
        Vue.component('index', {
            template: "#index"
        })

        let vm = new Vue({
            el: ".body",
            data: {
                name: 'login'
            }
        })
    </script>
</body>

</html>

效果图：
在这里插入图片描述

1.原理：

2.讲解:

（1）我们只需要将 component 元素使用 transition 元素包裹起来即可

（2）定义好两组样式

（3）设置 mode 属性来设置切换时的动画顺序，下面为先出后入

（3.1）如果没有设置 mode 属性，效果如下：

（3.2）如果设置了 mode=“out-in” 属性，效果如下：