动态组件与组件添加动画

<template>
    <div class=''>
        <!-- .prevent 阻止 href 的默认行为 -->
        <a href="" @click.prevent="conName = 'Login'">登录</a>
        <a href="" @click.prevent="conName = 'Register'">注册</a>

        <!-- component 标签是vue自定义的标签，动态绑定我们的组件，根据数据不同，绑定不同的组件 -->
        <!-- 
            动态组件
            keep-alive:如果你选择了一篇文章，切换到 a 标签，然后再切换回 b，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 组件 实例，为了解决这种情况 ，使用 keep-alive（失活的组件将会被缓存）
            is: 使用 is 特性 来切换不同的标签
        -->
        <!-- <component :is="conName"></component> -->
        <!-- 组件之间的会显得比较突兀，所以下面加入动画试试： -->
        <!-- mode 设置组件之间切换的方式 -->
        <transition mode="out-in">
            <component :is="conName"></component>
        </transition>
    </div>
</template>

<script>
    import Login from './Login.vue';
    import Register from './Register.vue';
    
    export default {
        components: {
            Login,Register
        },
        data() {
            return {
                conName:'Login'
            };
        },
        methods: {

        },
    }
</script>
<style lang="scss" scoped>
    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateX(150px);
    }
    .v-enter-active,
    .v-leave-active {
        transition: all .5s ease;
    }
</style>