0

我需要同时为多个项目设置动画，点击几次。我不允许使用 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/

4

2 回答 2

1

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

您似乎正在寻找animation-iteration-countCSS 属性，它指定动画运行的频率。您可以将其设置为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）

于 2013-06-24T23:51:09.457 回答
0

我可以通过在动画名称设置为无后添加 setTimeout(0) 来调用动画来修复它。

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

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

我希望它对某人有用。

于 2013-06-25T17:22:38.720 回答