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?
Starting the animation
Start by using a class instead of an ID. Change the CSS to this:
.smspopup {
-webkit-animation: move-sms 1.5s 1;
-webkit-animation-fill-mode: forwards;
}
And add class=smspopup
to the smspopup
element.
Next, inside the handler ( cancel_sms
?), just add the class to the element to begin the animation:
document.getElementById('smspopup').className = 'smspopup';
Animation end callback
For the second question (targeting the end of the animation), there are two options:
Attach a callback to the transitionEnd event. The only problem with this is that you need to listen to vendor-specific events:
myDiv.addEventListener('webkitAnimationEnd', callback);
Use a regular timeout. The problem with this is that the timing won't be perfect (but maybe close enough).
setTimeout(callback, 1500);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.