Safari会在提交重定向/表单时暂停所有动画 [英] Safari pauses all animation on redirect / form submission

问题描述

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

I have an animation that triggers when a link is clicked. It is a jQuery animation that enlarges a div then fades out. To ensure speed, at the exact same time that the link is clicked, the redirect is fired off. This has to happen and I cannot put the redirect in the success function of jQuery's animate(). This redirect is done via a form submission. On Chrome, Firefox, and IE it works as expected, the animation plays and if the page loads entirely before the finish of the animation, it redirects but the animation does play.

在Safari上（主要是在iPad上测试），一旦点击链接，该页面似乎冻结，并且动画无法执行。还有在网页加载时在屏幕上的GIF，如果我点击链接，而这些GIF在屏幕上和动画，他们也暂停。我看到一个帖子说，设置超时，应用样式，然后提交，但问题是，虽然HTML将应用该CSS样式，它仍然冻结屏幕，他们不处理动画，只是静态CSS样式。

On Safari (primarily testing on iPad), as soon as the link is clicked, the page seemingly 'freezes' and the animation fails to execute. There are also GIF's that are on the screen at page load, and if I click a link while those GIF's are on screen and animating, they pause as well. I have seen a post that says to set a timeout, apply styling, then submit, but the problem is that although the HTML will apply that CSS style, it still freezes the screen, and they are not dealing with animation, just static CSS styling.

这里是一些示例代码，显示我如何完成这个方法（它没有测试只是试图说明我的观点，所以可能会缺少零件或语法错误）：

Here is some example code to show the method of how I am accomplishing this (it is not tested just trying to illustrate my point, so there may be missing parts or syntax errors):

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样式动画。

Essentially, I need to make sure that once the Safari browser begins to load a new page / link, it does not stop updating the current page. This sounds like a problem in Safari from what I have seen, but this issue has also not been run into very commonly across the web as I have seen. There are posts dealing with GIF animations, but this is a CSS style animation.

感谢任何帮助！

推荐答案

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

Safari complains that it can't find the variable someData, it is trying to set the value of the input to the value of a variable that does not exist and stops executing that portion of the page's JavaScript.

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

只需创建如下变量：

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

即可在Safari中使用。

and it will work in Safari.

这篇关于Safari会在提交重定向/表单时暂停所有动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！