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>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值