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:;

 transform: translate3d(-100%, 0, 0);

}

.slide-right-leave-active {

 opacity:;

 transform: translate3d(100%, 0, 0);

}

.slide-left-enter {

 opacity:;

 transform: translate3d(100%, 0, 0);

}

.slide-left-leave-active {

 opacity:;

 transform: translate3d(-100%, 0, 0);

}