vue_h5_tools/src/page_transition.js

vue h5 开发小工具

import Vue from 'vue'

let oldStateKey = 0

export default {
  async animate() {
    const currentKey = history.state ? history.state.key : 0

    // 先清空动画，避免侧滑时执行动画
    Vue.$h5.store.page.enter_class = null
    Vue.$h5.store.page.exit_class = null

    if (Number(currentKey) >= Number(oldStateKey)) {
      // console.log('前进的动画', currentKey, oldStateKey)
      // 前进的动画
      if (!Vue.prototype.$isEdgeRight) {
        Vue.$h5.store.page.enter_class = 'animated fadeInRight'
        Vue.$h5.store.page.exit_class = 'animated fadeOutLeft'
      }
    } else {
      // console.log('后退的动画', currentKey, oldStateKey)
      // 后退的动画，ios有侧滑返回的问题，所以不执行动画
      if (!Vue.prototype.$isEdgeLeft) {
        Vue.$h5.store.page.enter_class = 'animated fadeInLeft'
        Vue.$h5.store.page.exit_class = 'animated fadeOutRight'
      }
    }
    // 让数据同步生成后再进行后台的计算，否则动画class变量不会立即变化，导致动画class下一次过渡才生效
    await Vue.prototype.$h5.utils.sleep(1)
  },
  async setOldStateKey(val = 0) {
    await Vue.prototype.$h5.utils.sleep(1)
    oldStateKey = history.state ? history.state.key : 0
    // console.log(`oldStateKey=${oldStateKey}`)
  }
}