使用Javascript與onclick事件啓動CSS3動畫

我正在使用CSS3動畫獲取一些很好的效果的web應用程序，但我不知道如何使用onclick事件激活它們。使用Javascript與onclick事件啓動CSS3動畫

這是CSS3動畫：（這被添加到DIV的名字是#smspopup）

#smspopup {  
-webkit-animation: move-sms 1.5s 1; 
    -webkit-animation-fill-mode: forwards; 
}

這是我的javascript，我只是不能找出我需要得到它去

function cancel_sms() 
{ 
    halte.style.opacity = 1; 
    document.getElementById('smspopup').style.visibility = 'hidden'; 
    document.getElementById('up').style.visibility = 'visible'; 
}

而我想要做的另一件事是延遲功能1.5秒，直到動畫結束。任何想法？

來源

2012-08-24 IanBauters

[**這個問題**可能的幫助。（http://stackoverflow.com/questions/12062818/how-to-combine-jquery-animate-with-css3-properties -without-using-css-transitions） –

通過使用類代替ID的啓動動畫

開始。在CSS改成這樣：

.smspopup {  
    -webkit-animation: move-sms 1.5s 1; 
    -webkit-animation-fill-mode: forwards; 
}

並添加class=smspopup到smspopup元素。

接下來，處理器內（cancel_sms？），只需將該類添加到元素開始動畫：

document.getElementById('smspopup').className = 'smspopup';

動畫結束回調

對於第二個問題（瞄準年底有兩種選擇：

將回調附加到transitionEnd事件。與此唯一的問題是，你需要聽供應商特定的事件：

myDiv.addEventListener('webkitAnimationEnd', callback);
使用常規超時。問題在於時機不會很完美（但也許足夠接近）。

setTimeout(callback, 1500);

來源

2012-08-24 14:36:11 McGarnagle

好吧，沒問題，我目前正在嘗試的是： _italic_document.getElementById（'smspopup'）.- webkit-animation（'move-sms 1.5s 1 forwards;'）; _ 有什麼想法我在這裏出錯了？ – IanBauters

@IanBauters直接添加CSS屬性，你可以使用：* document.getElementById（'smspopup'）。style [「 - webkit-animation」] ='move-sms 1.5s 1 forwards'; * – McGarnagle

太棒了！謝謝，你不會知道你是如何用webkitAnimationEnd重置動畫的？ – IanBauters

使用Javascript與onclick事件啓動CSS3動畫

回答

相關問題