使用javascript點擊css3動畫

我需要同時動畫幾個項目，點擊幾次。我不允許使用Jquery，所以我正在使用原生JavaScript和CSS3。使用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/

來源

2013-06-24 chrysillo

請同時向我們展示如何附加點擊處理程序以及點擊處理程序如何調用此動畫。 – Bergi

hey @Bergi，剛剛添加完整的代碼，只有10和7框是可點擊的，我應該可以點擊一個接一個動畫只運行一次 – chrysillo

似乎是一個重複[如何重新觸發一個WebKit CSS動畫通過JavaScript？]（http://stackoverflow.com/questions/4797675/how-do-i-re-trigger-a-webkit-css-animation-via-javascript） – Bergi

動畫將運行一次，所有的元素，但只是第一次

你似乎在尋找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）

來源

2013-06-24 23:51:09 Bergi

實際上我將動畫設置爲-webkit-animation：所有0.5s向前;我擔心，如果將其設置爲無限，則第一輪動畫將會循環，並且不會對我有用，因爲動畫將會更改每一次迭代 – chrysillo

對不起，我不確定你在問什麼，代碼中的「下一次迭代」在哪裏會改變動畫？ – Bergi

每次迭代時，變量_from_和_to_會隨着來自數組的值寬度，高度，頂部，樂英尺）。 – chrysillo

我能只是修復它在動畫名稱設置爲無後，添加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-25 17:22:38 chrysillo

使用javascript點擊css3動畫

回答

相關問題