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