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过渡动画)
组件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过渡动画的冲突问题,感觉方法还是不太好,各路大神有咩有好方法呀让小弟我借鉴借鉴