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 property，它指定动画运行的频率。您可以将其设置为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;

（Demo with standard properties and a few bugfixes，updated demo with webkit prefixes）

Answer 2

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

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

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

我希望它对某人有用。

用javascript点击css3动画

2 个答案: