Vue2路由动画效果实现

1. <template>  
2.   <div id="app">  
3.   
4.     <transition :name="transitionName">  
5.       <router-view class="child-view"></router-view>  
6.     </transition>  
7.   
8.   </div>  
9. </template>  
10.   
11. <script>  
12.   
13. export default {  
14.   name: 'app',  
15.   data () {  
16.     return {  
17.       transitionName: 'slide-left'  
18.     }  
19.   },  
20.   mounted () {  
21.   },  
22.   //监听路由的路径，可以通过不同的路径去选择不同的切换效果  
23.   watch: {  
24.     '$route' (to, from) {  
25.       if(to.path == '/'){  
26.         this.transitionName = 'slide-right';  
27.       }else{  
28.         this.transitionName = 'slide-left';  
29.       }  
30.     }  
31.   }  
32. }  
33. </script>  
34.   
35. <style>  
36. .child-view {  
37.   position: absolute;  
38.   left: 0;  
39.   top: 0;  
40.   width: 100%;  
41.   height: 100%;  
42.   transition: all .5s cubic-bezier(.55,0,.1,1);  
43. }  
44. .slide-left-enter, .slide-right-leave-active {  
45.   opacity: 0;  
46.   -webkit-transform: translate(30px, 0);  
47.   transform: translate(30px, 0);  
48. }  
49. .slide-left-leave-active, .slide-right-enter {  
50.   opacity: 0;  
51.   -webkit-transform: translate(-30px, 0);  
52.   transform: translate(-30px, 0);  
53. }  
54. </style>