Vue，组件切换-切换动画

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="../js/vue.js"></script>
 9 </head>
10 <style>
11     .v-enter,
12     .v-leave-to{
13         opacity: 0;
14         transform: translateX(150px);
15     }
16 
17     .v-enter-active,
18     .v-leave-active{
19         transition: all 0.5s ease;
20     }
21 </style>
22 <body>
23     <div id="app">
24 
25         <a href="" @click.prevent="comName='login'">登录</a>
26         <a href="" @click.prevent="comName='register'">注册</a>
27 
28         <!-- 通过 mode 属性， 设置组件切换时候的 模式 -->
29         <transition mode="out-in">
30             <component :is="comName"></component>
31         </transition>
32             
33 
34     </div>
35 
36           
37 
38 </body>
39 </html>
40 <script>
41 
42     //组件名称是 字符串
43     Vue.component('login', {
44         template: '<h3>登录组件</h3>'
45     })
46 
47     Vue.component('register', {
48         template: '<h3>注册组件</h3>'
49     })
50 
51     var vm = new Vue({
52         el: '#app',
53         data:{
54             comName: '' // 当前 component 中的 :is 绑定的组件的名称
55         },
56         methods: {
57             
58         },
59     })
60 
61 </script>

效果图

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Vue 组件切换 vue tab 切换动画 vue的路由切换动画 vue--组件切换--带动画效果---component Vue组件切换-以登录注册为例【加动画效果】 vue router 配合transition 切换动画 vue 路由切换的动画效果 vue切换路由时动画基于vux的Vue路由切换动画 vue多个组件实现切换