vue-router transition 路由切换效果

所需更改文件 App.vue

 1 //template结构：
 2 
 3 <template> 
 4 　　<div id="app"> 
 5 　　　　<div id="nav">
 6 　　　　　　<router-link to="/come">Come</router-link>
 7 　　　　</div>
 8 　　<transition :name="transitionName"> 
 9 　　　　　　<router-view class="child-view"></router-view> 
10 　　</transition> 
11 　　</div> 
12 </template>
13 
14 //script结构：
15 
16 <script> 
17 
18 export default { 
19 　　name: 'app', 
20 　　data () { 
21 　　　　return { 
22 　　　　　　transitionName: 'slide-left' 
23 　　　　} 
24 　　}, 
25 mounted () { 
26 },
27 
28 //监听路由的路径，可以通过不同的路径去选择不同的切换效果 
29 watch: {
30 　　'$route' (to, from) {
31 　　//    console.log('现在路由:',to.path.split('/')[1],'来自路由:',from.path.split('/')[1],'现在的动画:',this.transitionName)
32 　　　　const toDepth = to.path.split('/').length
33 　　　　const fromDepth = from.path.split('/').length
34 　　　　this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
35 　　　　}
36 　　}
37 
38 } 
39 </script>
40 
41 //style结构：
42 
43 <style>
44 
45 .child-view { 
46 　　margin: 300px auto; 
47 　　width: 100%; 
48 　　height: 100%; 
49 　　transition: all .5s cubic-bezier(.55,0,.1,1); 
50 } 
51 .slide-left-enter, .slide-right-leave-active { 
52 　　opacity: 0; 
53 　　-webkit-transform: translate(30px, 0); 
54 　　transform: translate(30px, 0); 
55 } 
56 .slide-left-leave-active, .slide-right-enter { 
57 　　opacity: 0; 
58 　　-webkit-transform: translate(-30px, 0); 
59 　　transform: translate(-30px, 0); 
60 }
61 </style>

如需交流可加博主QQ:602697966(备注博客园)

posted on 2017-08-07 10:48 佑之以航阅读(15547) 评论(0) 编辑收藏举报