iOS 7+ 向后滑动手势与状态更改动画冲突

iOS 7+ swipe back gesture conflict with stateChange animations

本文关键字：状态冲突动画 iOS 更新时间：2023-09-26

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

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

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

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

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