Vue 组件切换的过渡

Vue 组件切换的过渡

---

上一章博客中，实现了组件的切换，不过对于有强迫症的码农来说，没有实现过渡，组件的切换就显得很突兀，下面就为他们加上过渡效果来增加用户体验

---

声明组件

---

<script>
    //组件名称是 字符串
    Vue.component('login',{
        template :'<h3>登陆组件</h3>'
    })

    Vue.component('register',{
        template :'<h3>注册组件</h3>'
    })

    var vm = new Vue({
        el : '#app',
        data :{
            comName : 'login',//当前 component 中的 :is 绑定的那个的组件的名称
        },
        methods:{},
    });
</script>

---

实现组件的过渡 ：

1. 使用 transition 标签包裹组件

    <div id="app">
        <a href="" @click.prevent="comName = 'login' ">登陆</a>
        <a href="" @click.prevent="comName = 'register' ">注册</a>
        <!--
            component 是一个占位符，  :is  属性，可以用来指定要展示的组件的名称
        -->

        <!--1. 用transition 标签包裹组件-->
        <!-- 通过 mode 属性，设置组件切换时候的 模式/样式 -->
        <transition mode="out-in">
            <component :is=" comName "></component>
        </transition>
    </div>

2. 设置样式

    <style>
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,.v-leave-active{
            transition: all 0.5s ease;
        }
    </style>

这就是组件切换时，使用过渡的效果，希望有所帮助，同时也希望大家能多多交流，
一起进步 ~~~