多个组件切换的动画效果 

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <script src="./public/lib/vue/dist/vue.js"></script>
 5     <style>
 6         .v-enter,
 7         .v-leave-to {
 8             opacity: 0;
 9             transform: translateX(150px);
10         }
11         .v-enter-active,
12         .v-leave-active {
13             transition: all 0.5s ease;
14         }
15     </style>
16 </head>
17 <body>
18     <div id="app">
19         <a href="" @click.prevent="comname= 'login'">login</a>
20         <a href="" @click.prevent="comname = 'regis'">regis</a>
21          <!-- 把需要动画效果的组件用transition包起来 -->
22         <transition>
23             <component :is="comname"></component>
24         </transition>
25     </div>
26     <script>
27         Vue.component('login', {
28             template: '<h3>login</h3>'
29         })
30         Vue.component('regis', {
31             template: '<h3>regis</h3>'
32         })
33         var app = new Vue({
34             el: '#app',
35             data: {
36                 comname: 'regis'
37             },
38             methods: {
39             },
40 
41         })
42     </script>
43 </body>

 

posted @ 2019-09-12 09:45  normalboy(NB)  阅读(192)  评论(0)    收藏  举报