javascript - iOS 7+ 向后滑动手势与 stateChange 动画冲突

标签 javascript jquery ios css angularjs

简而言之,当在 AngularJS 应用程序中从一种状态移动到另一种状态时,我使用 CSS 动画来动画 View 更改。例如,通过 .ng-enter.ng-leave 类应用淡入淡出或变换。

但在 iOS 7+ 中,您可以通过将手指从屏幕边缘向左或向右滑动来从一个页面切换到另一个页面,它会执行后退或前进操作,就像单击工具栏上的后退和前进按钮一样。然而,由于操作系统将自己的动画返回到历史堆栈中的上一页,然后 AngularJS 在之后触发状态更改,然后执行 CSS 动画,因此您会得到双重动画和闪烁,因为您已经可以看到的内容随后被动画化回到视野中...我们怎样才能防止这种情况发生?因为它的用户体验看起来非常糟糕,并且对最终用户来说看起来像是一个错误。

我考虑过检测 iOS 7+ 然后禁用动画。但我只想在用手指从边缘滑动时禁用动画,而不是在实际单击或浏览器按钮时禁用动画。据我所知,没有办法检测到这一点。但用户体验确实受到了影响。

以前有人遇到过这个问题吗?解决了这个问题吗?

最佳答案

我认为您需要弄清楚当 navigation event 时滑动从哪里开始。被触发。可能就像在事件触发时检测页面上是否有触摸一样简单 - 这意味着用户在那一刻正在触摸它......在这种情况下,禁用 css 动画。理论上就是这样,但我从未尝试过任何接近的事情。 :)

关于javascript - iOS 7+ 向后滑动手势与 stateChange 动画冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35184254/

相关文章:

javascript - jQuery.ajaxSetup() 被忽略

jquery - 当我在响应模式下切换菜单时,菜单会隐藏

ios - 通过原子提要将第三方文档添加到 Xcode 5

javascript - 独立于浏览器的方法来检测何时加载图像

c# - 如何修复这个重定向循环?

javascript - 允许用户使用 JavaScript 将文件上传到文件夹

javascript - tsconfig 的 'outFile' 和 webpack config 的 'output' 有什么区别

javascript - 我可以在 jquery 中制作一个包含这个的复合选择器吗?

ios - 将应用程序放入 AdMob 后出现错误 "library not found for"

ios - if-let 语句不解包可选