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>
效果图
