Question

我有一个动画，在点击链接时触发。这是一个jQuery动画，扩大div然后淡出。为了确保速度，在单击链接的同一时间，重定向将被触发。这必须发生，我不能将重定向放在jQuery的animate（）的成功函数中。此重定向通过表单提交完成。在Chrome，Firefox和IE上，它按预期工作，动画播放，如果页面在动画结束前完全加载，它会重定向，但动画确实会播放。

在Safari（主要在iPad上测试）上，只要点击链接，页面就会冻结＆＃39;并且动画无法执行。在页面加载时屏幕上还有GIF，如果我在屏幕上显示这些GIF并动画时点击链接，它们也会暂停。我看过一篇文章说要设置超时，应用样式，然后提交，但问题是虽然HTML会应用那种CSS风格，但它仍然会冻结屏幕，而且它们不处理动画，只是静态CSS样式

下面是一些示例代码，用于显示我如何完成此操作的方法（仅仅是试图说明我的观点，因此可能会缺少部分或语法错误）：

＆＃13;

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

＆＃13;

<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>

＆＃13;

基本上，我需要确保一旦Safari浏览器开始加载新页面/链接，它就不会停止更新当前页面。从我所看到的情况来看，这听起来像Safari中的问题，但是我已经看到这个问题在网络上也没有遇到过。有些帖子处理GIF动画，但这是一个CSS风格的动画。

感谢您的帮助！

Answer 1

您可以使用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 2

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

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

只需创建如下变量：

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

它可以在Safari中使用。

Answer 3

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

Answer 4

我发现，每当浏览器开始加载新页面时，Safari就会在触发pagehide事件后立即暂停所有动画。

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

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

我的猜测是Safari通过将所有可用的CPU和GPU功能集中到下一页的呈现上来提高性能。

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

到目前为止，我还没有找到一种在页面卸载期间保留运动动画的方法；微调器充其量似乎是冻结的，但仍会显示出来。可能的解决方法是使用静态消息指示其为“正在加载...”

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

4 个答案: