[toc] ## pre ``` .left-enter{ transform:translateX(100%); } ``` 可以省略，默認即為0 ``` .left-enter-to{ transoform:translateX(0%); } ``` ``` .left-enter-active,.left-enter-active{ transition:1s; } ``` 可以省略，默認即為0 ``` .left-leave{ transoform:translateX(0%); } ``` ``` .left-leave-to{ transform:translateX(-100%); } ``` ``` <transition name="left"> <router-view class="enter"></router-view> </transition> ``` ## 左右切換 ``` { path:'' ,name:'' ,component:'' ,meta:{ index:1 } } ``` ``` data(){ return { name:'left' } } ``` ``` watch:{ $route(to,from){ if(to.meta.index<from.meta.index){ this.name = 'right'; }else{ this.name = 'left'; } } } ```