Vue中设置组件切换动画

最新推荐文章于 2024-05-23 09:06:46 发布

键盘的打工仔

最新推荐文章于 2024-05-23 09:06:46 发布

阅读量349

点赞数

本文链接：https://blog.csdn.net/weixin_45616246/article/details/105520526

版权

请陛下批阅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件切换动画</title>
    <script src="../../vue/vue-v2.6.11.js"></script>
    <style>
        .v-enter, .v-leave-to{
            opacity: 0;
            transform: translateY(120px);
        }

        .v-enter-active, .v-leave-active{
            transition: all 0.7s ease;
        }
    </style>

</head>
<body>
<div id="app">
    <button @click="comName = 'login'">登录</button>
    <button @click="comName = 'register'">注册</button>

    <!--mode 设置组件切换的模式  第一个的组件先消失,下一个组件再显示-->
    <transition mode="out-in">
        <!-- :isName  要显示的对应名称的组件 -->
        <component :is="comName"></component>
    </transition>
</div>
</body>
<script>
    Vue.component('login', {
        template: `<h2>登录组件</h2>`
    });

    Vue.component('register', {
        template: `<h2>注册组件</h2>`
    });
    var vm = new Vue({
        el: '#app',
        data: {
            comName: 'login'
        }
    });
</script>
</html>