基于vux的Vue路由切换动画

Posted 2021-03-25 qqprincekin

const history = window.sessionStorage
history.clear()
let historyCount = history.getItem(‘count‘) * 1 || 0
history.setItem(‘/index‘, 0)

router.beforeEach((to, from, next) => {
  const toIndex = history.getItem(to.path)
  const fromIndex = history.getItem(from.path)
  if (toIndex) {
    if (!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === ‘0‘ && fromIndex === ‘0‘)) {
      store.commit(‘UPDATE_DIRECTION‘, { direction: ‘forward‘ })
    } else {
      store.commit(‘UPDATE_DIRECTION‘, { direction: ‘reverse‘ })
    }
  } else {
    ++historyCount
    history.setItem(‘count‘, historyCount)
    to.path !== ‘/index‘ && history.setItem(to.path, historyCount)
    store.commit(‘UPDATE_DIRECTION‘, { direction: ‘forward‘ })
  }
  next()
})

　　

const state = {
  direction: ‘forward‘
}

　　

<template>
  <div id="app">
    <transition :name="‘pop-‘ + (direction === ‘forward‘ ? ‘in‘ : ‘out‘)">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  import { mapState } from ‘vuex‘

  export default {
    computed: {
      ...mapState({
        direction: state => state.common.direction
      })
    }
  }
</script>

<style>
  .pop-out-enter-active, .pop-out-leave-active, .pop-in-enter-active, .pop-in-leave-active {
    will-change: transform;
    transition: .38s ease-in-out, visibility .38s;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    -webkit-perspective: 1000;
    perspective: 1000;
  }

  .pop-out-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  .pop-out-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .pop-in-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .pop-in-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
</style>