VUE单页面切换动画（全网最好的切换效果）

// 视图切换动画逻辑
let history = window.sessionStorage
let historyCount = history.getItem('count') * 1 || 0
function routerTransition (to, from) {
  const toIndex = history.getItem(to.name)
  const fromIndex = history.getItem(from.name)
  let direction = 'forward'
  if (toIndex) {
    if (toIndex >= fromIndex || !fromIndex) {
      store.commit('UPDATE_DIRECTION', {direction})
    } else {
      direction = 'reverse'
      store.commit('UPDATE_DIRECTION', {direction})
    }
  } else {
    ++historyCount
    history.setItem('count', historyCount)
    to.path !== '/' && history.setItem(to.name, historyCount)
    direction = 'forward'
    store.commit('UPDATE_DIRECTION', {direction})
  }
}
router.beforeEach(function (to, from, next) {
  routerTransition(to, from)
  next()
})

<template>
  <div id="app">
      <div v-transfer-dom >
        <loading :show="isLoading" :transition="''">loading>
      div>
      <transition  :name="viewAnimate">
               <router-view v-if="isNetworkOnline">router-view>
               <no-network  v-if="!isNetworkOnline">no-network>
      transition>
  div>
template>

<script>
import '@/assets/iconfont/iconfont.css'
import { Loading, TransferDom } from 'vux'
import {mapState} from 'vuex'
import noNetwork from '@/page/system/callback/noNetwork.vue'
export default {
  directives: {
    TransferDom
  },
  computed: {
    ...mapState({
      isLoading: state => state.isLoading,
      direction: state => state.direction,
      isNetworkOnline: state => state.isNetworkOnline
    })
  },
    // dynamically set transition based on route change
  watch: {
    '$route' (to, from) {
      if (this.direction === 'forward') {
        this.viewAnimate = 'slide-left'
      } else {
        this.viewAnimate = 'slide-right'
      }
    }
  },
  data () {
    return {
      viewAnimate: 'slide-left'
    }
  },
  components: {
    Loading,
    noNetwork
  }
}
script>

<style lang="less">
@import '~vux/src/styles/reset.less';
@import '~vux/src/styles/close.less';
@import '~@/styles/common.less';
body {
  background-color: #fbf9fe;
}
@keyframes slideInLeft {
    from {
        transform: translate3d(100%, 0, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(0, 0, 0);
             opacity: 1;
    }
}
@keyframes slideInRight {
    from {
        transform: translate3d(-100%, 0, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(0, 0, 0);
             opacity: 1;
    }
}
@keyframes slideLeftOut {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
}
@keyframes slideRightOut {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
} 
.slide-left-enter-active {
    animation: slideInLeft .3s forwards;
    z-index:5;
}

.slide-left-leave-active {
    animation: slideLeftOut .3s forwards;
    z-index:3;
}
 .slide-right-enter-active {
    animation: slideInRight .3s forwards;
    z-index:5;
}

.slide-right-leave-active {
    animation: slideRightOut .3s forwards;
    z-index:3;
} 
style>