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

Posted 2023-03-06

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

【英文标题】：JQuery - on the fly CSS animation change only happens when I Ieave browser window and return

【发布时间】：2013-05-13 20:43:21

【问题描述】：

作为一个更大的自我项目的一部分，我整天都在研究这个问题，但遇到了一个小问题：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。这对于我添加的未来样式更改是必要的，因为我希望其他元素以相同的速度在球旁边移动，所有元素都在“水平”内移动。但是，似乎子元素没有被更新属性，例如直到我离开标签并返回。在 chrome 中，如果我使用“检查元素”直接检查球，则将鼠标悬停在#ball 的代码上时出现的 div 轮廓将独立于屏幕上的球移动！

有什么想法吗？我是使用 jQuery 的新手，这真的很令人沮丧：>

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

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

它似乎可以在带有 translate 而不是 translate3d 的 Chrome 上使用 -webkit。这是一种耻辱，感觉就像一个相当老套的方法，因为我遵循的教程推荐 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);
    

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

【参考方案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');