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;
});

サイト全体を検索し、いくつかのコードを使用してみました。アニメーションは 1 回だけ実行されます。

これは動作しないサンプルコードですhttp://jsfiddle.net/kR384/2/

4

2 に答える 2

1

アニメーションは 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

アニメーション名を none に設定した後、 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 に答える