使用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动画

回答

相关问题