微信扫一扫打赏支持

VUE参考---组件切换动画

VUE参考---组件切换动画

一、总结

一句话总结：

组件切换动画 直接把组件放到<transition>标签中即可
    <!-- 通过 mode 属性,设置组件切换时候的 模式 -->
    <transition mode="out-in">
      <component :is="comName"></component>
    </transition>

  <style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

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

 

 

1、组件切换时候的 模式？

组件切换的时候，可以给transition设置mode属性，来设置动画模式，比如out-in 先出后进，避免上一个组件没出去下一个组件进来了
    <!-- 通过 mode 属性,设置组件切换时候的 模式 -->
    <transition mode="out-in">
      <component :is="comName"></component>
    </transition>

  <style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

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

 

 

 

二、组件切换动画

博客对应课程的视频位置：

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="./lib/vue-2.4.0.js"></script>
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 </head>
23 
24 <body>
25   <div id="app">
26     <a href="" @click.prevent="comName='login'">登录</a>
27     <a href="" @click.prevent="comName='register'">注册</a>
28 
29     <!-- 通过 mode 属性,设置组件切换时候的 模式 -->
30     <transition mode="out-in">
31       <component :is="comName"></component>
32     </transition>
33 
34   </div>
35 
36   <script>
37     // 组件名称是 字符串
38     Vue.component('login', {
39       template: '<h3>登录组件</h3>'
40     })
41 
42     Vue.component('register', {
43       template: '<h3>注册组件</h3>'
44     })
45 
46     // 创建 Vue 实例，得到 ViewModel
47     var vm = new Vue({
48       el: '#app',
49       data: {
50         comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
51       },
52       methods: {}
53     });
54   </script>
55 </body>
56 
57 </html>

 

 

 

 
posted @ 2020-04-22 15:48  范仁义  阅读(228)  评论(0)    收藏  举报