vue實現不同頁面跳轉的左滑右滑效果切換效果

1、在app.vue增加代碼如下

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view class="views" />      
    </transition>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {}
  },
  computed: {
    transitionName () {
      return this.$store.state.transitionName
    }
  }
}
</script>

<style lang="scss">
/*切換頁面時的滑動效果*/
.views {
  position: absolute;
  width: 100%;
  transition: all .8s ease;
  top: 0;
 }
.slide-left-enter-active {
  transition: all .3s ease;
}
.slide-left-leave-active {
  transition: all .4s ease;
}
.slide-left-enter {
  transform: translateX(100%);
  opacity: 0;
}
.slide-left-leave-to {
 transform: translateX(-100%);
  opacity: 0;
}

.slide-right-enter-active {
  transition: all .3s ease;
}
.slide-right-leave-active {
  transition: all .4s ease;
}
.slide-right-enter {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-right-leave-to {
    transform: translateX(100%);
    opacity: 0;
}
</style>

main.js文件

import store from './store'

// 路由跳轉前進后退動畫,Vue原型上定義transition為動畫效果
router.beforeEach((to, from, next) => {
  store.commit('changeTransition', 'slide-none')
  if (from.meta.tree > to.meta.tree) {
    // 后退,想右滑動
    store.commit('changeTransition', 'slide-right')
  } else if (from.meta.tree < to.meta.tree) {
    // 前進,想左滑動
    store.commit('changeTransition', 'slide-left')
  } else {
    // 同一層級,無動畫
    store.commit('changeTransition', 'slide-none')
  }
  next()
})

store文件

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations
})

mutations.js

export default {
  changeTransition (state, transitionName) {
    state.transitionName = transitionName
  }
}

state.js

export default {
  changeTransition (state, transitionName) {
    state.transitionName = transitionName
  }
}

 組件里面是content布局

  <div :class="style">
    <v-header title="每日成績">
       // 固定頭部
    </v-header>
    <div class="content">
       // 滾動容器
    </div>
</div>