2

作为一个更大的自我项目的一部分，我整天都在研究这个问题，但遇到了一个小问题：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/

在 Chrome 上使用带有translate而不是translate3d的 -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)但我不确定如何为我的重复动画实现它.

4

1 回答 1

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');
于 2013-07-10T09:45:50.450 回答