使用带有onclick事件的Javascript启动CSS3动画

Question

我正在开发一个使用CSS3动画的webapp来获得一些不错的效果,但我无法想出用onclick事件激活它们.

这是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秒直到动画结束.有人有什么想法？

Answer 1

开始动画

首先使用类而不是 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';

动画结束回调

对于第二个问题（针对动画的结尾），有两种选择：

1. 将回调附加到transitionEnd事件。唯一的问题是您需要监听供应商特定的事件：

   myDiv.addEventListener('webkitAnimationEnd', callback);

2. 使用定期超时。问题在于时机并不完美（但可能足够接近）。

   setTimeout(callback, 1500);