Comience la animación de CSS3 usando Javascript con el evento onclick

Question

Estoy trabajando en una aplicación web que usa animaciones CSS3 para algunos buenos efectos, pero no me puedo imaginar para activarlos con un evento onclick.

esta es la animación CSS3: (El nombre de la DIV esto se añade a #smspopup es)

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

y este es mi Javascript donde yo simplemente no puedo imaginar lo que necesito para conseguirlo va

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

Y otra cosa que quiero hacer es retrasar las funciones 1.5 segundos hasta que la animación haya terminado. Alguien tiene alguna idea?

Answer 1

Inicio de la animación

de inicio mediante el uso de una clase en lugar de un ID. Cambiar la CSS para esto:

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

Y añadir class=smspopup al elemento smspopup.

A continuación, en el interior del controlador (cancel_sms?), Sólo tiene que añadir la clase de elemento para comenzar la animación:

document.getElementById('smspopup').className = 'smspopup'; 

Animación extremo de devolución de llamada

Para la segunda pregunta (con el objetivo final de la animación), hay dos opciones:

1. adjuntar una devolución de llamada al transitionEnd evento. El único problema con esto es que es necesario escuchar a los eventos específicos del proveedor:

   myDiv.addEventListener('webkitAnimationEnd', callback);

2. Utilice un tiempo de espera normal. El problema con esto es que el tiempo no será perfecto (pero tal vez lo suficientemente cerca).

   setTimeout(callback, 1500);