5

I'm working on a webapp that uses CSS3 animations for some nice effects, but I can't figure out to activate them with an onclick event.

this is the CSS3 Animation: (The name of the DIV this is added to is #smspopup)

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

And this is my Javascript where I just can't figure out what I need to get it going

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

And another thing I want to do is delay the functions 1.5 seconds until the animation is finished. Anyone any idea?

4

1 回答 1

3

开始动画

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

于 2012-08-24T14:36:11.317 回答