App.vue

  1. <template>
  2.   <div id="app">
  3.     <transition :name="direction">
  4.       <router-view class="appView" />
  5.     </transition>
  6.     <navbar />
  7.   </div>
  8. </template>
  9. <script>
  10. import navbar from '@/components/layout/navBar.vue'
  11. export default {
  12.   name: 'App',
  13.   components: {
  14.     navbar
  15.   },
  16.   data () {
  17.     return {
  18.       direction: 'fade'
  19.     }
  20.   },
  21.   watch: {
  22.     $route (to, from) {
  23.       this.$router.setTransition(this) // 设置页面切换方法
  24.     }
  25.   }
  26. }
  27. </script>
  28. <style scoped>
  29. .appView {
  30.   position: absolute;
  31.   width:100%;
  32.   transition: all .3s cubic-bezier(.55,0,.1,1);
  33. }
  34. </style>

router/index.js

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. // ===== 页面 切换动画 实现 ↓ ========
  4. Router.prototype.go = function () { // 增强原方法，好处是旧的业务模块不需要任何变动
  5.   this.isBack = true
  6.   window.history.go(-1)
  7. }
  8. Router.prototype.setTransition = function (app) {
  9.   if (this.isBack === undefined) { // 如果isBack为true时，证明是用户点击了回退，执行slide-right动画
  10.     app.direction = 'fade'
  11.   } else if (this.isBack) {
  12.     app.direction = 'slide-right'
  13.   } else {
  14.     app.direction = 'slide-left'
  15.   }
  16.   this.isBack = false // 做完回退动画后，要设置成前进动画，否则下次打开页面动画将还是回退
  17. }
  18. // tab 项目切换
  19. Router.prototype.switchTab = function (path) {
  20.   this.isBack = undefined
  21.   this.replace({ path: path })
  22. }
  23. // ===== 页面 切换动画 实现 ↑ ========
  24. Vue.use(Router)
  25. // 路由表
  26. export const routerMap = []
  27. let router = new Router({
  28.   routes: routerMap
  29. })
  30. // 监听浏览器的返回按钮
  31. window.addEventListener('popstate', () => {
  32.   router.isBack = true
  33. }, false)
  35. export default router

css 过渡动画

  1. /*fade 淡入淡出*/
  2. .fade-enter-active,
  3. .fade-leave-active {
  4.   transition: opacity 0.28s;
  5. }
  6. .fade-enter,
  7. .fade-leave-active {
  8.   opacity: 0;
  9. }
  10. /*fade-transform 窗体切换*/
  11. .slide-left-enter, .slide-right-leave-active {
  12.   opacity: 0;
  13.   -webkit-transform: translate(50px, 0);
  14.   transform: translate(50px, 0);
  15. }
  16. .slide-left-leave-active, .slide-right-enter {
  17.   opacity: 0;
  18.   -webkit-transform: translate(-50px, 0);
  19.   transform: translate(-50px, 0);
  20. }