vue移动端转场动画

Posted 2020-12-05 zxuedong

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);
}