vue路由切换动画

  介绍一个vue项目给大家学习，阅读别人的项目可以快速提高自己哦，  移动端vue完整项目

[plain]  view plain  copy

1. 1、这里是左右切换  
2. <template>  
3.   <div id="app">  
4.    <transition :name="transitionName">  
5.     <router-view class='router'></router-view>  
6.      </transition>  
7.   </div>  
8. </template>  
9.   
10. <script type="text/babel">  
11. export default {  
12.   name: 'app',  
13.   data(){  
14.     return{  
15.         transitionName: 'slide-left'  
16.     }  
17.   },  
18.   //监听路由的路径，可以通过不同的路径去选择不同的切换效果  
19.   watch: {  
20.     '$route' (to, from) {  
21.         console.log(from.path)  
22.       if(to.path == '/login'){  
23.         this.transitionName = 'slide-left';  
24.       }else if(from.path === '/login'){  
25.         this.transitionName = 'slide-right';  
26.       }  
27.     }  
28.   }  
29. }  
30. </script>  
31.   
32. <style>  
33. .router {  
34.      position: absolute;  
35.      width: 100%;  
36.      transition: all .8s ease;  
37. }  
38.     .slide-left-enter,  
39.  .slide-right-leave-active {  
40.      opacity: 0;  
41.     -webkit-transform: translate(100%, 0);  
42.     transform: translate(100%, 0);  
43. }  
44.   
45. .slide-left-leave-active,  
46. .slide-right-enter {  
47.      opacity: 0;  
48.     -webkit-transform: translate(-100%, 0);  
49.     transform: translate(-100% 0);  
50. }  
51. </style>  
52. 2、这里是渐变动画  
53. <template>  
54.   <div id="app">  
55.    <transition :name="transitionName">  
56.     <router-view class='router'></router-view>  
57.      </transition>  
58.   </div>  
59. </template>  
60.   
61. <script type="text/babel">  
62. export default {  
63.   name: 'app',  
64.   data(){  
65.     return{  
66.         transitionName: 'slide-left'  
67.     }  
68.   }  
69. }  
70. </script>  
71.   
72. <style>  
73. .router {  
74.      position: absolute;  
75.      width: 100%;  
76.      transition: all .8s ease;  
77. }  
78.     .slide-left-enter,  
79.  .slide-right-leave-active {  
80.      opacity: 0;  
81. }  
82.   
83. .slide-left-leave-active,  
84. .slide-right-enter {  
85.      opacity: 0;  
86. }  
87. </style>