我有一个点击链接时触发的动画。这是一个放大 div 然后淡出的 jQuery 动画。为了确保速度，在单击链接的同时，会触发重定向。这是必须发生的，我不能将重定向放在 jQuery 的 animate() 的成功函数中。此重定向是通过表单提交完成的。在 Chrome、Firefox 和 IE 上，它按预期工作，播放动画，如果页面在动画结束之前完全加载，则会重定向，但动画确实播放。
在 Safari 上（主要在 iPad 上进行测试），一旦单击链接，页面就会“冻结”，并且动画无法执行。还有一些 GIF 在页面加载时出现在屏幕上，如果我在这些 GIF 在屏幕上显示动画时单击链接，它们也会暂停。我看过一篇文章说设置超时，应用样式，然后提交，但问题是虽然 HTML 将应用该 CSS 样式，但它仍然冻结屏幕，并且它们不处理动画，只是静态 CSS 样式。
下面是一些示例代码，展示了我如何实现此目的的方法（它没有经过测试，只是为了说明我的观点，因此可能缺少部分或语法错误）：
var someData = 'foo'; //This value is irrelevant, just there for syntactical consistency.
$("#link").on("click", function() {
var form = $("<form method='POST'></form>");
form.attr("action", "http://someurl.com");
var input = $("<input type='hidden'/>");
input.val(someData);
form.append(input);
$(document.body).append(form);
form.submit();
//Form has been submitted, now run a short animation for the remaining life of the current page
$(this).animate({width: "100px", height: "100px", opacity: "0"}, 150);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="link" style="width: 100px; height: 100px; background-color: #FFF">Click Me</div>
本质上，我需要确保一旦 Safari 浏览器开始加载新页面/链接，它就不会停止更新当前页面。从我所看到的情况来看，这听起来像是 Safari 中的一个问题，但正如我所看到的，这个问题在网络上也没有很常见。有一些帖子涉及 GIF 动画，但这是 CSS 风格的动画。
谢谢你的帮助！
我发现，只要浏览器开始加载新页面，一旦触发 pagehide 事件，Safari 实际上就会暂停所有动画。
页面隐藏后，它甚至不允许 CSS 更改，例如显示之前隐藏的微调器。
为了在 pagehide 事件触发之前显示微调器，我需要为 a[href] 单击和 ajaxComplete 事件添加侦听器。
我的猜测是，Safari 这样做是为了通过将所有可用的 CPU 和 GPU 资源集中到下一页的渲染来提高性能。
我认为这有点极端，对于用户体验来说不幸的是，在许多移动 Web 应用程序中，我们在页面卸载时使用旋转动画来向用户显示在获取新页面时的几秒钟内正在发生的事情。
到目前为止，我还没有找到在页面卸载期间保留运动动画的方法；最多旋转器看起来冻结但仍然显示...一个可能的解决方法是使用静态消息来指示它“正在加载...”
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
