JQuery - 动态 CSS 动画更改仅在我离开浏览器窗口并返回时发生

Question

作为一个更大的 self 元素的一部分，我一整天都在做这件事，但遇到了一个小问题:http://jsfiddle.net/GYv22/2/

我正在尝试使用快/慢按钮改变飞球的速度。这用于删除当前的 CSS 动画样式(以旧速度)，但是我发现它在不这样做的情况下按预期工作，现在只是附加一个新样式(以新速度)，动画正在使用利用 translate3d 属性的关键帧.不确定这是否是最好的方法，但我认为它比使用类更适合，因为我不断动态地改变动画速度。

function animate(x, y) {
        $('#xSpeed').html(x);
        $('#ySpeed').html(y);

        var horizontalCSS = 'updown ' + y + 's infinite linear';
        var ballCSS = 'leftright ' + x + 's infinite linear';

        $('#horizontal')
            .css('-webkit-animation', horizontalCSS) /* Chrome */
            .css('-moz-animation', horizontalCSS) /* Firefox */
            .css('animation', horizontalCSS); /* IE */

        $('#ball')
            .css('-webkit-animation', ballCSS)
            .css('-moz-animation', ballCSS)
            .css('animation', ballCSS);
    }

这在 Firefox 中按预期工作(虽然有点抖动，但速度变化是实时的，即当你点击按钮时球变得更快/更慢!)，在 Chrome 中我必须离开选项卡并返回才能看到速度变化 (???)，在 IE 10 中球动画有效，但根本没有速度变化，即使在离开/返回选项卡或实时时也是如此。

我认为问题是动画样式被附加到#horizo​​ntal，我还希望它影响它的子元素#ball。这对于我添加的 future 样式更改是必要的，因为我想让其他元素以相同的速度沿着球移动，所有元素都在“水平”范围内移动。但是，子元素似乎没有更新属性，例如直到我离开选项卡并返回。在 chrome 中，如果我使用“检查元素”直接检查球，将鼠标悬停在#ball 代码上时出现的 div 轮廓将独立于屏幕上的球移动!

有什么想法吗？我刚开始使用 jQuery，这真的很令人沮丧:>

编辑:我认为默认情况下 translate3d 和 Chrome 不使用 GPU 是一个问题，设置在 about:flags 中。我会测试并发布更新。

编辑:更新: http://jsfiddle.net/GYv22/3/

在 Chrome 上使用 -webkit 与 translate 而不是 translate3d 似乎可以工作。这是一种耻辱，并且感觉像是一种相当 hacky 的方法，因为我遵循的教程推荐了 translate3d 以获得 GPU 能力。

 @-webkit-keyframes leftright {
    0%, 100% {
        -webkit-transform: translate(0px, 0);

    }
    50% {
        -webkit-transform: translate(545px, 0);
    }
}
@-webkit-keyframes updown {
    0%, 50%, 100% {
        -webkit-transform: translate(0, 0);
    }
    25% {
        -webkit-transform: translate(0, 150px);
    }
    75% {
        -webkit-transform: translate(0, -135px);
    }
}

我尝试在 about:flags 中启用 Chrome 上的 GPU 设置，但这也没有解决我的问题。至少这似乎是一个临时的解决方法。我还找到了一个直接从子元素添加/删除动画的解决方案，以防万一这对其他人有用:webkit translate3d issues (peek-thru)但我不确定如何为我的重复动画实现它。

Answer 1

对于 Chrome，尝试通过暂停来插入新速度，并在设置新速度后重新运行它。

  $('#horizontal')
        .css('-webkit-animation', horizontalCSS) /* Chrome */
        .css('-moz-animation', horizontalCSS) /* Firefox */
        .css('animation', horizontalCSS); /* IE */

  $('#ball')
        .css('-webkit-animation', ballCSS)
        .css('-moz-animation', ballCSS)
        .css('animation', ballCSS);

  $('#horizontal,#ball').css('-webkit-animation-play-state', 'paused');
  $('#horizontal,#ball').css('-webkit-animation-play-state', 'running');