jquery - IE10 CSS3 动画速度不使用 jQuery 动态更新

Question

这是我正在进行的一个更大的副元素的一部分。我有一系列移动的 div，使用 @keyframes 和 CSS3 的动画属性。由于 transform3d 的问题并选择使用 left: 和 top: 等，在 webkit 浏览器中很难使它工作之后，我终于有所作为。我有更快/更慢的按钮，它们改变了秒属性，指定内联动画速度。这在 Chrome 中可以正常工作，但在 IE 中不行。

http://jsfiddle.net/AxQQB/6/ (编辑:现在无限循环动画)

如您所见，我可以像这样内联设置初始动画样式:

var speed = 1.5;
var animationCSS = 'myfirst '+speed+'s';


$('#button1').click(function () {
alert("Set initial speed");

$('#test')
.css('background-color', '#000')
.css('animation', animationCSS);
.css('-webkit-animation', animationCSS); 
});

因此，我使用 jQuery 以自定义速度动态分配动画 CSS。我有第二个按钮来更改速度变量并重新分配 CSS。当应用了新的内联样式时，动画应该会再次发生。这在 chrome 中工作正常，但在 IE10 中不工作 :( 我有一个单独的 removeCss 函数，它似乎工作正常，无论有没有这条线，它都可以在 Chrome 中工作。

$('#button2').click(function () {
    alert("Slow down and change speed");
    %('#test').removeCss('animation,-webkit-animation,
    speed = 10;
    animationCSS = 'myfirst '+speed+'s';
    $('#test').css('background-color', '#00FFFF')
        .css('animation', animationCSS)
       .css('-webkit-animation', animationCSS);
});

这让我很生气，如果我检查元素，我可以看到新的速度变量已经内联应用，但是没有明显的变化。有什么想法吗？

Answer 1

据我了解，只有当您将 animation-name 更改为不同的值时，动画才会回复。最简单的方法是将 animationEnd 事件附加到元素，并在该处理程序中设置 this.style.animationName = "";。然后，当您将新动画分配给它时，它将正确播放。