javascript - 使用javascript单击时的css3动画

Question

我需要同时为多个元素设置动画，点击几次。我不允许使用 Jquery，所以我使用 native 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

The animation will run once, all the elements but just the first time

您似乎在寻找 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 )