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) // 重置变量isIosMoveBackif (this.backRouter) {this.$router.push(this.backRouter)} else if (this.isBackHandle) {this.$emit('backHandle')} else {this.$router.go(-1)}
},

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

IOS手机侧滑返回与Vue过渡动画冲突相关推荐

[vue] vue过渡动画实现的方式有哪些？
[vue] vue过渡动画实现的方式有哪些? 1.使用vue的transition标签结合css样式完成动画 2.利用animate.css结合transition实现动画 3.利用 vue中的钩子函 ...
禁止手机侧滑返回上一个页面的三种方法
禁止手机侧滑返回上一个页面的三种方法侧滑返回上一个页面用户体验很很好.但是在特别的场景侧滑返回上一个页面严重影响用户体验: 1.如正在斗地主,结果在出牌时,由于出最左边的牌时,不小心触发了侧滑离开斗 ...
Vue过渡动画---vue工作笔记0014
然后我们来看vue中的过渡,以及动画效果. 上面这个toggle1,是可以实现点一下,慢慢的显示隐藏第二个是,点一下,然后先放大,然后再缩小. vue实现动画效果的原理,实际上就是 1.可以看到就是 ...
11,你听说过vue过渡动画了嘛？没有吧? 众里寻他千百度，百度不一定全面？
2020[前端VUE框架]最新最全实战课程,VUE56节分享,免费拿不谢! vue过度动画的使用方法整理 vue.js css 脸书发布于 2020-11-19 transition props n ...
uni.openLocation起始点定位，IOS手机无法返回等问题
uni.openLocation使用问题环境:uni-app开发H5项目,H5项目链接webview嵌入app中目的:打开目标的地图位置并进行导航,导航完成后退出回到原界面问题: 仅能传入目标地 ...
vue过渡动画Animate.css动画库(1)
一.前言: 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验, Vue中为我们可以自定义过渡或动画或者Vue提供一些内置组件完成动画,利用它们我们可以方便的实现过渡动画 ...
iOS仿微信相册界面翻转过渡动画
点开微信相册的时候,想要在相册图片界面跳转查看点赞和评论时,微信会采用界面翻转的过渡动画来跳转到评论界面,好像是在图片界面的背面一样,点击完成又会翻转回到图片界面,这不同于一般的导航界面滑动动画,觉得 ...
iOS 禁用侧滑返回手势要点整理
项目中可能某些页面返回按钮需要自定义,然后在点击返回按钮时做出某些判断,或者直接弹出到根控制器,这时候需要禁用侧滑返回手势,防止它不走判断的代码直接返回上个界面. 网上找了些资料,大致方法有两种,但要 ...
[搬运] iOS 7 侧滑返回手势使用和错误集
原文:http://blog.sina.com.cn/s/blog_65c178a80102v0f4.html 前言: ios7开始苹果增加了页面右滑返回的效果:具体的是以UINavigation ...

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

淦

app.vue页面

组件header.vue

IOS手机侧滑返回与Vue过渡动画冲突相关推荐

最新文章

热门文章