Introduction: There is no animation effect when switching page route in VUE, so I went to the Internet to find how to realize the left and right sliding animation similar to the original App, and summarized several methods, each with advantages and disadvantages.

Mount the goBack method on vue-Router prototype

This method is the most on the Internet, but I tried and did not work, first record it

1. Define the goBack method in index.js under the Router folder

import Router from 'vue-router'

Vue.use(Router)
Router.prototype.goBack = function () {
  this.isBack = trueReturn window.history.go(-1)}Copy the code

2. Dynamically bind route animations in app. vue

 <transition :name="transitionName">
    <router-view class="child-view"></router-view> </transition>'$route' (to, from){
      let isBack = this.$router.isBack; 
      
      if(isBack) {
        this.transitionName = 'slide-right'
      } else {
        this.transitionName = 'slide-left'
      }
      this.$router.isBack = false}}Copy the code

3. Forward and backward animation

.child-view { position: absolute; left: 0; top: 0; width: 100%; height: 100%; Transition: all 0.5s cubic- Bezier (0.55, 0, 0.1, 1); } .slide-left-enter, .slide-right-leave-active { opacity: 0; -webkit-transform: translate(50px, 0); transform: translate(50px, 0); } .slide-left-leave-active, .slide-right-enter { opacity: 0; -webkit-transform: translate(-50px, 0); transform: translate(-50px, 0); }Copy the code

4. Call the goBack method on the route where the back animation is required

this.$router.goBack()
Copy the code

Finally, I do not know whether there is a call problem, has not been effective, and did not find what is the reason. You can supplement it later if you solve the problem. Here is the second method, this effect is achieved, relatively simple.

Use meta objects to define the current hierarchy in routing

1. Add a Meta object to the route configuration. Index represents the level of the current route.

export default new Router({
  routes: [{
      path: '/',
      name: 'Home',
      meta:{index:0},
      component: Home
    },
    {
      path: '/category',
      name: 'Category',
      meta:{index:1},
      component: Category
    },
    {
      path: '/shopcart',
      name: 'Shopcart',
      meta:{index:2},
      component: Shopcart
    }
  ]
})
Copy the code

2. Set the route animation, which is the same as the first method

3. Monitor route changes and compare hierarchical indexes. If the to index is larger than the FROM index, the index is in the forward state; otherwise, it is in the backward state

watch: {
   '$route'(to, from) {
       if(to.meta.index > from.meta.index){
        this.transitionName = 'slide-left';
       }else{
        this.transitionName = 'slide-right'; }}}Copy the code

4. Set the forward and backward animation, same as the first method

In this way, you can define your own hierarchy to achieve dynamic switching route animation.

3. Use vuEX to add indexes to the route and store them in the seesionStorage

This is said to be adapted from the source code of the mobile framework VUX

1. Animate the route in app. vue

<transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
      <keep-alive>
      <router-view class="router-view" ></router-view>
      </keep-alive>
</transition>
Copy the code

Store state with VUEX

import { mapState } from 'vuex'computed:{ ... mapState({ direction: state => state.mutations.direction }) }Copy the code

Sets the transition animation style

<style scoped>
 .vux-pop-out-enter-active,
  .vux-pop-out-leave-active,
  .vux-pop-in-enter-active,
  .vux-pop-in-leave-active {
    will-change: transform;
    transition: all 250ms;
    height: 100%;
    top: 0;
    position: absolute;
    backface-visibility: hidden;
    perspective: 1000;
  }

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

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

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

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

Add index to the route in main.js and store it in sessionStorage so that the clicked index value remains unchanged. Add index to the newly added route and count+1 at the same time.

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

router.beforeEach(function (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 ! = ='/' && history.setItem(to.path, historyCount);
    store.commit('UPDATE_DIRECTION', {direction: 'forward'})
  }
    next()
});
Copy the code

store/mutation.js

const state = {
  direction: 'forward'};Copy the code

The original link: www.jianshu.com/p/a29d5ecfa…