iOS 7+使用stateChange动画轻扫手势冲突

时间:2016-02-03 17:56:11

标签: javascript jquery ios css angularjs

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

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

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

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

1 个答案:

答案 0 :(得分:0)

我认为您需要弄清楚触发navigation event时滑动的位置。可能就像检测事件触发时是否触摸页面一样简单 - 它意味着用户正在触摸它...在这种情况下,禁用css动画。从理论上来说,但我从来没有尝试过任何关闭。 :)