用JavaScript单击CSS3动画

Question

我需要同时为多个项目设置动画，单击几次。 我不允许使用Jquery，所以我正在使用本机javascript和CSS3。

Array.prototype.forEach.call(els, function(el) {
    elemId = el.getAttribute("id");

    var toWidth = boxPos[thisId][elemId].width;
    var toHeight = boxPos[thisId][elemId].height;
    var toTop = boxPos[thisId][elemId].top;
    var toLeft = boxPos[thisId][elemId].left;           
    var from = "0% {width:"+currPos[elemId].width+"; height:"+currPos[elemId].height+"; top:"+currPos[elemId].top+"; left:"+currPos[elemId].left+";}";
    var to = "100% { width:"+toWidth+"; height:"+toHeight+"; top:"+toTop+"; left:"+toLeft+";}";
    currPos[elemId].width = toWidth;
    currPos[elemId].height = toHeight;
    currPos[elemId].top = toTop;
    currPos[elemId].left = toLeft;

    var styleSheets = document.styleSheets;
    for (var i = 0; i < styleSheets.length; ++i) {
        for (var j = 0; j < styleSheets[i].cssRules.length; ++j) {
            if (styleSheets[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && styleSheets[i].cssRules[j].name == elemId){
                keyframes = styleSheets[i].cssRules[j];

            }
        }
    }
    keyframes.deleteRule("0%");
    keyframes.deleteRule("100%");

    keyframes.insertRule(from);
    keyframes.insertRule(to);
    el.style.webkitAnimationName = elemId;
});

我搜索了该站点，并尝试使用一些代码。 动画将运行一次，除第一次外所有元素都将运行：'（

这是一个不起作用的示例代码http://jsfiddle.net/kR384/2/

Answer 1

动画将运行一次，所有元素都将运行，只是第一次

您似乎正在寻找animation-iteration-count CSS属性 ，该属性指定动画的运行频率。 您可以将其设置为infinite或任何数值（正）值。

---

动画存在的问题是，它们仅在第一次单击时才启动。 之后，您无需更改元素的样式（重新分配animation-name无济于事）-因此不会触发任何动画（即使您更改了关键帧规则）。 http://css-tricks.com/restart-css-animation/上的文章讨论了这一点和一些解决方案。

在您的情况下，甚至可以将动画名称更改为包含“状态”的名称：

     if( …cssRules[j].name.split("-")[0] == elemId)
         keyframes = styleSheets[i].cssRules[j];
…


var newname = elemId+"-"+thisId;
keyframes.name = newname;
…
el.style.animationName = newname;

（ 具有标准属性和一些错误修复的 演示，带有webkit前缀的更新演示 ）

Answer 2

我可以通过在动画名称设置为none之后添加setTimeout（0）来调用动画来修复它。

这是固定代码http://jsfiddle.net/kR384/3/ ：

function resetAndRun(o){
    one.style.webkitAnimationName = "none";
    …
    ten.style.webkitAnimationName = "none";
    setTimeout(function(){o.animateBox();}, 0); 
}

我希望它对某人有用。