Vue - 转场动画

参考博客：手摸手，带你用 vue 动画实现原生 app 切换效果，丝滑般的体验

使用vue官方提供的transition组件实现类似微信的转场动画效果，动画分前进动画与退出动画两种

• 当跳转至新页面（前进）时，当前页面向左侧滑出，新页面从右侧滑入
• 当触发返回（退出）时，当前页面向右侧滑出，上一层页面从左侧滑入

所以需要在store中存放一个变量，transtion组件根据变量名判断使用前进动画还是退出动画

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

在App.vue中监听路由返回（popstate），并将动画类型设置为退出动画

<t