如何使CSS3動畫可重用？

我有下面的代碼，但它只會在一次點擊中工作。這將不能夠使用兩次：

@-moz-keyframes lulse { 
    0%{ 
     -moz-transform:scale(1); 
    } 
    20%{ 
     -moz-transform:scale(1.5); 
    } 
    100% { 
     -moz-transform:scale(1); 
    } 
} 

.pinto { 
    -moz-animation-name: lulse; 
    -moz-animation-duration: .2s; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-timing-function: linear; 
    -moz-animation-direction: normal; 
}

的Javascript：

onclick="changeClass(this.id); 

function changeClass(a) 
{ 
    document.getElementById(a).className += "pinto"; 

}

來源

2011-06-12 Dave

您可能想問自己，如果您已經在使用Javascript，爲什麼不使用Javascript實現整個解決方案？許多CSS3將不會跨瀏覽器兼容多年，你可能會發現處理像jQuery這樣的問題會更容易。 – Wex 2011-06-12 20:02:58

不用了，謝謝。如果我能弄明白，我會把webkit和Opera代碼放在那裏。 – Dave 2011-06-12 20:09:15

我發現了這個，但它是JQuery：http://css-tricks.com/restart-css-animation/它說你需要刪除然後讀取元素才能使其工作。我得到了刪除下來試試吧（函數刪除（B） { 奇聞趣事= B; \t ELEMENTO =的document.getElementById（奇聞趣事）; \t的setTimeout（「elemento.parentNode.removeChild（ELEMENTO）」，800） ;}）現在也許在900毫秒添加一個setTimeout來添加它，但我無法弄清楚 – Dave 2011-06-12 20:12:10

嗯，表面上看起來你應該能夠在如果您單擊處理程序的開始刪除類它存在。具體來說：

function changeClass(a) { 
    var elementA = document.getElementById(a); 
    var regEx = new RegExp('(\\s|^)pinto(\\s|$)'); 
    elementA.className = elementA.className.replace(regEx,' '); 
    elementA.className += " pinto"; 
}

這將刪除類並重新應用它，它應該重新啓動效果。

來源

2011-06-12 19:52:58

無法讓它工作。在Firefox上添加代碼：http://jsfiddle.net/Hx672/ – Dave 2011-06-12 20:04:24

嘗試在超時時添加類名稱 setTimeout（function（）{document.getElementById（a）.className + =「pinto」;} ，1000）; – 2011-06-12 21:24:06

哇。適用於setTimeout。謝謝。 – Dave 2011-06-12 22:42:19

如何使CSS3動畫可重用？

回答

相關問題