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

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

前言:

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

总代码:


<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'">
        
        
        
        <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>

效果图:
29vue学习——为组件切换添加动画效果_第1张图片

1.原理:
29vue学习——为组件切换添加动画效果_第2张图片
2.讲解:

(1)我们只需要将 component 元素使用 transition 元素包裹起来即可
29vue学习——为组件切换添加动画效果_第3张图片

(2)定义好两组样式
29vue学习——为组件切换添加动画效果_第4张图片
(3)设置 mode 属性来设置切换时的动画顺序,下面为先出后入
29vue学习——为组件切换添加动画效果_第5张图片
(3.1)如果没有设置 mode 属性,效果如下:
29vue学习——为组件切换添加动画效果_第6张图片
(3.2)如果设置了 mode=“out-in” 属性,效果如下:
29vue学习——为组件切换添加动画效果_第7张图片

你可能感兴趣的:(29vue学习——为组件切换添加动画效果)