欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-25 12:07:27
前端小白一个,最近做的一个Vue项目用到了Vue的过度动画,本来效果挺好的突然发现在IOS手机上项目本身使用的Vue过度动画与IOS侧滑发生冲突,出现了侧滑效果与Vue过度动画重复执行导致页面切换效果不理想。思路:两个动画效果肯定是要停掉一个的,禁止掉原生侧滑有点不现实,那就想办法改变我们自己的。淦首先定义变量isIosMoveBack判断过度动画取消的时机,我这里直接在vuex里面定义了个变量,方便后面组件内部的返回按钮重置变量store > stateisIosMoveBack:....

前端小白一个,最近做的一个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过渡动画)
IOS手机侧滑返回与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过渡动画的冲突问题,感觉方法还是不太好,各路大神有咩有好方法呀让小弟我借鉴借鉴