vue路由切换动画

第一步，使用账号注册阿里云图标账号。第二步，创建项目，如图：（1）（2）创建项目第三步：把图标加入购物车，然后添加到项目（1）把图标添加购物车（2添加至项目）最后一步：下载下来解压之后里面有demo，如果对你有帮助，在下面点个赞吧，哈哈

Revival_Liang

3518人浏览 · 2017-02-22 09:43:46

Revival_Liang · 2017-02-22 09:43:46 发布

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

[plain]view plaincopy 
   
 1、这里是左右切换  
 <template>  
   <div id="app">  
    <transition :name="transitionName">  
     <router-view class='router'></router-view>  
      </transition>  
   </div>  
 </template>  
   
 <script type="text/babel">  
 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';  
       }  
     }  
   }  
 }  
 </script>  
   
 <style>  
 .router {  
      position: absolute;  
      width: 100%;  
      transition: all .8s ease;  
 }  
     .slide-left-enter,  
  .slide-right-leave-active {  
      opacity: 0;  
     -webkit-transform: translate(100%, 0);  
     transform: translate(100%, 0);  
 }  
   
 .slide-left-leave-active,  
 .slide-right-enter {  
      opacity: 0;  
     -webkit-transform: translate(-100%, 0);  
     transform: translate(-100% 0);  
 }  
 </style>  
 2、这里是渐变动画  
 <template>  
   <div id="app">  
    <transition :name="transitionName">  
     <router-view class='router'></router-view>  
      </transition>  
   </div>  
 </template>  
   
 <script type="text/babel">  
 export default {  
   name: 'app',  
   data(){  
     return{  
         transitionName: 'slide-left'  
     }  
   }  
 }  
 </script>  
   
 <style>  
 .router {  
      position: absolute;  
      width: 100%;  
      transition: all .8s ease;  
 }  
     .slide-left-enter,  
  .slide-right-leave-active {  
      opacity: 0;  
 }  
   
 .slide-left-leave-active,  
 .slide-right-enter {  
      opacity: 0;  
 }  
 </style>  

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^