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

Question

我正在开发一个使用 CSS3 动画来获得一些不错效果的 web 应用，但我无法通过 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);