IE10 CSS3动画速度不能用jQuery动态更新

这是我正在研究的一个更大的侧面项目的一部分。我有一系列移动div，使用@keyframes和CSS3的动画属性。在webkit浏览器中，由于transform3d的问题以及选择使用left：和top：等等，而在webkit浏览器中工作很困难之后，我终于到了某个地方。我有更快/更慢的按钮，它改变了秒属性，指定内嵌的动画速度。这在Chrome中正常工作，但不在IE中。IE10 CSS3动画速度不能用jQuery动态更新

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); 
});

它的驾驶我疯了，如果我检查元素我可以看到新的速度变量已在线应用，但也没有明显的变化。任何想法？

来源

2013-06-02 Vixxd

按照我的理解动画，如果你改变animation-name为不同的值才会回复。要做到这一点最简单的方法会将animationEnd事件附加到该元素，并在该处理程序中设置this.style.animationName = "";。然后，当您将新动画分配给它时，它将正确播放。

来源

2013-06-02 16:59:03

感谢您的回复:)在我的主要项目中，动画不断发生，设置为无限，并且在它仍在移动时改变其速度。我猜这个animationEnd事件在这种情况下不适用？抱歉的混乱，这里是一个无限动画jsfiddle：http://jsfiddle.net/AxQQB/6/ 我还添加了一行删除动画名称，不幸的是我没有喜欢那个:( – Vixxd

创建一个名为mysecond的动画，该动画具有相同的关键帧，并在您想更新速度时在myfirst和mysecond之间切换动画名称。这应该会触发动画更新。或者，为速度不同的动画名称创建几个不同的动画，并设置合适的类别。

的jsfiddle：http://jsfiddle.net/AxQQB/11/

如果你想让他们之间的平稳过渡，应该抓住animationiteration事件，并更改类在那个时候。

来源

2013-06-03 08:19:25

IE10 CSS3动画速度不能用jQuery动态更新

回答

相关问题