IOS手机侧滑返回与Vue过渡动画冲突

前端小白一个，最近做的一个Vue项目用到了Vue的过度动画，本来效果挺好的突然发现在IOS手机上项目本身使用的Vue过度动画与IOS侧滑发生冲突，出现了侧滑效果与Vue过度动画重复执行导致页面切换效果不理想。

思路：
两个动画效果肯定是要停掉一个的，禁止掉原生侧滑有点不现实，那就想办法改变我们自己的。

淦

定义变量isIosMoveBack判断过度动画取消的时机（在IOS系统机型下滑动时），这里直接在vuex里面定义个变量，方便后面组件内部的返回按钮重置变量

store > state

	isIosMoveBack: false

store > mutations

	setIsIosMoveBack (state, param) {
        state.isIosMoveBack = param
    }

app.vue页面

computed: {
      isIosMoveBack() {
        return this.$store.state.isIosMoveBack
      }
    }

监听滑动事件改变变量isIosMoveBack值

mounted() {
	// getDeviceType函数为判断机型（IOS时返回true)
	if (this.getDeviceType()){
	   document.body.addEventListener('touchmove', () => {
	      this.$store.commit('setIsIosMoveBack', true)
	   }, false)
	}
}

Vue路由过渡动画的监听判断

watch: {
      $route(to, from) {
          if (this.isIosMoveBack) {
              this.transitionName = ''
              this.$store.commit('setIsIosMoveBack', false)
            } else {
                if(to.meta.index > from.meta.index){
                    this.transitionName = 'slide-left'
                }else if(to.meta.index < from.meta.index){
                    this.transitionName = 'slide-right'
                }else{
                    this.transitionName = ''
                }
            }
        }
    },

到此，还没结束--------还有个问题(项目自身返回按钮需要重置变量)，前面只是监听了touchmove，那任何在路由跳转前的滑动效果都会被监听，也就是说任何返回操作前this.isIosMoveBack都可能为true（除了侧滑，其他的返回操作仍然是需要Vue过渡动画）

组件header.vue

如上图：需要在点击返回时重置isIosMoveBack值，在组件中重置store中的变量this.$store.commit('setIsIosMoveBack', false)

back () {
     this.$store.commit('setIsIosMoveBack', false) // 重置变量isIosMoveBack
      if (this.backRouter) {
        this.$router.push(this.backRouter)
      } else if (this.isBackHandle) {
        this.$emit('backHandle')
      } else {
        this.$router.go(-1)
      }
},

结束！ 基本上解决了ios与Vue过渡动画的冲突问题，感觉方法还是不太好，各路大神有咩有好方法呀让小弟我借鉴借鉴😅