使用javascript点击css3动画

css3 animation on click with javascript

本文关键字：动画 css3 点击 javascript 使用      更新时间：2023-09-26

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

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

您似乎在寻找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前缀的更新演示）

我只需添加一个setTimeout（0）就可以修复它，以便在动画名称设置为none后调用动画。

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

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

我希望它对某人有用。

相关文章：