Vue - transition animation

Reference blog: hands touch hands with you to achieve a native app transitions with vue animation, silky-like experience

Vue official use of the transition component to achieve similar micro-channel transition animation effects, animation division advance animation and exit the movie two kinds

• When a jump to a new page (forward), the current slide to the left side of the page, a new page slides in from the right side
• When the trigger return (exit), the current page slides out to the right, from the left on one page Slide

So we need to be stored in a variable in the store, transtion assembly according to the variable name to determine the use of forward animation or exit the movie

// store.js
export default new Vuex.Store({
  state: {
    animateState: ''
  },
  mutations: {
    setAnimateState (state, animateState) {
      state.animateState = animateState
    }
  }
})

In App.vue in listening routed back (popstate), and the type of animation is set to exit the movie

<template>
  <div id="app">
    <transition :name="$store.state.animateState">
      <router-view />
    </transition>
  </div>
</template>

<script>
import store from '@/store'

export default {
  name: "App",
  mounted() {
    window.addEventListener("popstate", () => {
      this.$store.commit('setAnimateState', 'out')
    })
  },
}
</script>

<style lang="scss">
  html, body, #app {
    height: 100%;
  }
  @mixin fixStyle {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .in-enter-active {
    @include fixStyle;
    z-index: 200;
    transition: transform .4s ease;
  }
  .in-enter {
    transform: translateX(100vw);
  }
  .in-leave-active {
    @include fixStyle;
    z-index: 100;
    transition: transform .4s ease;
  }
  .in-leave-to {
    transform: translateX(-100vw);
  } 
  .out-enter-active {
    @include fixStyle;
    z-index: 200;
    transition: transform .4s ease;
  }
  .out-enter {
    transform: translateX(-100vw);
  }
  .out-leave-active {
    @include fixStyle;
    z-index: 200;
    transition: transform .4s ease;
  }
  .out-leave-to {
    transform: translateX(100vw);
  }
</style>

When routing jump forward to add animation to define a function mixins

// common.js
import router from '@/router'
import store from '@/store'

export default {
  methods: {
    router_push (params) {
      store.commit('setAnimateState', 'in')
      router.push({ ...params }) // 对象解构
    }
  }
}

Router_push function call routing Jump

import Common from '@/common/js/common.js'

export default {
  mixins: [Common],
  name: "home",
  data() {
    return {}
  },
  methods: {
    showGood(id) {
      this.router_push({ path: "good", query: { id } })
    }
  }
}

The bottom navigation bar to switch the page transition animation process is not used

Add global guard in front main.js detected bottom navigation page place the cut animation type to empty

// main.js
import store from './store'

router.beforeEach((to, from, next) => {
  // 不使用过渡效果页面的白名单
  const whiteList = ['home', 'me']
  if (whiteList.includes(to.name) && whiteList.includes(from.name)) {
    store.commit('setAnimateState', '')
  }
  next()
})