Safari 在重定向/表单提交时暂停所有动画

Question

我有一个在点击链接时触发的动画。这是一个放大 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 样式的动画。

感谢您的帮助！

Answer 1

我发现，只要浏览器开始加载新页面，只要触发 pagehide 事件，Safari 就会暂停所有动画。

在页面隐藏之后，它甚至不允许 CSS 更改，例如显示之前隐藏的微调器。

为了在 pagehide 事件触发之前显示微调器，我需要为 a[href] 点击和 ajaxComplete 事件添加侦听器。

我的猜测是 Safari 这样做是为了通过将所有可用的 CPU 和 GPU 能力集中在下一页的渲染上来提高性能。

我认为这有点极端，对于 UX 来说是不幸的，因为在许多移动 Web 应用程序中，我们在页面卸载时使用微调器动画来向用户展示在获取新页面时的几秒钟内发生的事情。

到目前为止，我还没有找到在页面卸载期间保留运动动画的方法；最好的情况是微调器看起来冻结但仍然显示......一种可能的解决方法是使用静态消息来指示它“正在加载......”

Answer 2

您可以在动画结束后使用 setTimeout 转到链接。

var someData = 'foo'; //This value is irrelevant, just there for syntactical consistency.

$("#link").on("click", function() {
    setTimeout(doThisAfterTimeExpires,2000);
    $(this).animate({width: "100px", height: "100px", opacity: "0"}, 150);
});

function doThisAfterTimeExpires(){

    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();

}

Answer 3

Safari 抱怨它找不到变量someData，它试图将输入的值设置为不存在的变量的值，并停止执行该部分页面的 JavaScript。

[Error] ReferenceError: Can't find variable: someData

只需像这样创建变量：

// [snip]
var input = $("<input type='hidden'/>");
var someData;
input.val(someData);
// [snip]

它可以在 Safari 中运行。

Answer 4

在提交表单之前编写动画代码。一段时间后执行表单提交。那就是：

var someData = 'foo'; //This value is irrelevant, just there for syntactical consistency.

$("#link").on("click", function(e) {

//Write your code for animation at first.
$(this).animate({width: "100px", height: "100px", opacity: "0"}, 150);

//write the code for form submission
setTimeout(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();
 }, 1000);

});

Answer 5

可能在动画仍在播放时使用一些 Ajax 在隐藏帧中加载新页面。完成加载后，正常重定向到相同的 URL。然后希望这将是一个即时重定向，因为新页面可能会被缓存并且其底层查询已经处理。