0

我想知道是否可以使用 javascript 生成 webkit 动画。基本上我需要的是,如果我单击元素 A,元素 B 每次都应该使用随机参数进行动画处理(这就是为什么我不能使用预先固定的 CSS)。我正在测试我是否真的可以通过 javascript 生成所有这些,并且我已经走了很远。我的代码还没有做任何随机的事情,但是一旦我让它与 javasript 一起正常工作,就很容易让它随机化。所以现在我只想在每次单击元素 A 时为元素 B 设置动画。我的代码如下所示:

$("#elementA").live('touchstart mousedown',function() {

$("head style").remove();
var cssAnimation  = document.createElement('style');
cssAnimation.type = 'text/css';
var rules = document.createTextNode('@-webkit-keyframes random_spin {'+
'from   { -webkit-transform: rotate(0deg);      }'+
'to     { -webkit-transform: rotate(1440deg);   }'+
'}');

cssAnimation.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);

$("#elementB").removeClass("random_spin");
$("#elementB").css({'-webkit-animation-name': ''});

$("#elementB").css({'-webkit-animation-name': 'random_spin'});
$("#elementB").addClass("random_spin");
});

在那里,我刚刚将动画添加到标题中,并将其应用于 elementB。

我的“random_spin”类是我已经预定义的 CSS:

.random_spin {
    -webkit-animation-duration:         5s;  
    -webkit-animation-timing-function:  ease;
}

我这样做的目的是,每次单击 elementA 时,我都应该能够使 elementB 旋转。不幸的是,它只执行一次,无论我点击多少次或重置动画名称多少次,它仍然只执行一次。我究竟做错了什么?

4

1 回答 1

1

要重新启动 CSS3 动画,您不能只删除和添加一个类而不在命令之间放置一点延迟。这允许浏览器有时间在添加新类之前实际删除该类。你可以用一个简单的 setTimeout 来做到这一点

setTimeout(function(){
    $("#elementB").addClass("random_spin");
}, 100);

更多信息和示例可以在下面找到。

http://css-tricks.com/restart-css-animation/

于 2012-10-16T18:44:39.180 回答