0

这是我正在进行的一个更大的副项目的一部分。我有一系列移动的 div，使用 @keyframes 和 CSS3 的动画属性。由于 transform3d 的问题并选择使用 left: 和 top: 等，在 webkit 浏览器中工作遇到很多困难之后，我终于到达了某个地方。我有更快/更慢的按钮，它改变了 seconds 属性，内联指定了动画速度。这在 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);
});

这让我发疯，如果我检查元素，我可以看到新的速度变量已被内联应用，但是没有明显的变化。有任何想法吗？

4

2 回答 2

0

创建一个mysecond具有相同关键帧的动画，并在您想要更新速度时在 myfirst 和 mysecond 之间交替使用动画名称。这应该会触发动画更新。或者，为您的不同动画创建几个类，这些类除了速度之外还有不同的动画名称，并设置适当的类。

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

如果你想要它们之间的平滑过渡，你应该捕捉动画迭代事件，并在那个时候改变类。

于 2013-06-03T08:19:25.563 回答
0

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

于 2013-06-02T16:59:03.683 回答