zoukankan      html  css  js  c++  java
  • vue移动端转场动画

    vue移动端转场动画

    1.介绍使用vue移动端做项目的时候,为了用户的体验良好,我们需要页面有一种进入和转出的效果

    // 在App.vue根组件中
    
    <template>
    
      <div id="app">
    
        <transition :name="transitionName">
          <router-view />
        </transition>
    
      </div>
    
    </template>
    <script>
    
    export default {
    
    
        data () {
    
            return {
    
                transitionName: 'slide-left'
            }
        },
    
        watch: {
    
            $route (to, from) {
    
                // 通过判断路由自定义的级别来判断是转入还是转出
    
                if (to.meta.level > from.meta.level) {
    
                    this.transitionName = 'slide-left'
                } else {
    
                    this.transitionName = 'slide-right'
                }
            }
        }
        
    }
    
    </script>
    // router/index.js
    
    const routes = [
    
      {
        path: '/test',
        name: 'test',
        component: () => import('@/views/test'),
        meta: {
    
         // 自定义路由的级别
          level: 24
        }
      },
      {
        path: '/keep1',
        name: 'keep1',
        component: () => import('../views/keep1'),
        meta: {
          level: 12
        }
      },
      {
        path: '/keep2',
        name: 'keep2',
        component: () => import('../views/keep2'),
        alias: '/app',
        meta: {
          level: 6
        }
      }
    
    ]
    /*
        动画样式
        will-change: transform    优化渲染速度
    */
    
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
    
     will-change: transform;
     transition: all 0.5s;
     width: 100%;
     position: absolute;
    }
    .slide-right-enter {
     opacity: 0;
     transform: translate3d(-100%, 0, 0);
    }
    .slide-right-leave-active {
     opacity: 0;
     transform: translate3d(100%, 0, 0);
    }
    .slide-left-enter {
     opacity: 0;
     transform: translate3d(100%, 0, 0);
    }
    .slide-left-leave-active {
     opacity: 0;
     transform: translate3d(-100%, 0, 0);
    }
  • 相关阅读:
    测 试 报 告模板
    浅谈如何设计自动化测试框架
    GET与POST类型接口
    测试用例设计总结
    Java OO知识总结
    Java基础知识总结
    MIT 6.824学习笔记3 Go语言并发解析
    Go语言_并发
    MIT 6.824学习笔记4 Lab1
    Leetcode Lect3 二分法总结
  • 原文地址:https://www.cnblogs.com/zxuedong/p/12956757.html
Copyright © 2011-2022 走看看