vue路由切换动画

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

 1、这里是左右切换



 export default {
   name: 'app',
   data(){
     return{
         transitionName: 'slide-left'
     }
   },
   //监听路由的路径，可以通过不同的路径去选择不同的切换效果
   watch: {
     '$route' (to, from) {
         console.log(from.path)
       if(to.path == '/login'){
         this.transitionName = 'slide-left';
       }else if(from.path === '/login'){
         this.transitionName = 'slide-right';
       }
     }
   }
 }


   </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">.router {  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">     position: absolute;  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">     width: 100%;  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">     transition: all .8s ease;  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">}  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">    .slide-left-enter,  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;"> .slide-right-leave-active {  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">     opacity: 0;  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">    -webkit-transform: translate(100%, 0);  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">    transform: translate(100%, 0);  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">}  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">.slide-left-leave-active,  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">.slide-right-enter {  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">     opacity: 0;  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">    -webkit-transform: translate(-100%, 0);  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">    transform: translate(-100% 0);  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">}  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">
 2、这里是渐变动画



 export default {
   name: 'app',
   data(){
     return{
         transitionName: 'slide-left'
     }
   }
 }


   </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">.router {  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">     position: absolute;  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">     width: 100%;  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">     transition: all .8s ease;  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">}  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">    .slide-left-enter,  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;"> .slide-right-leave-active {  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">     opacity: 0;  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">}  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">.slide-left-leave-active,  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">.slide-right-enter {  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">     opacity: 0;  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">}  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">