Avvia animazione CSS3 utilizzando Javascript con evento onclick

Question

Sto lavorando a una webapp che utilizza animazioni CSS3 per alcuni effetti interessanti, ma non riesco a capire se attivarli con un evento onclick.

questo è l'animazione CSS3: (Il nome della DIV questo si aggiunge a è #smspopup)

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

E questa è la mia JavaScript in cui non riesco proprio a capire cosa ho bisogno per farlo andare

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

E un'altra cosa che voglio fare è ritardare le funzioni di 1,5 secondi fino a quando l'animazione è finita. Qualche idea?

Answer 1

partire l'animazione

Inizia utilizzando una classe invece di un ID. Modificare il CSS a questo:

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

E aggiungere class=smspopup all'elemento smspopup.

successivo, all'interno del gestore (cancel_sms?), Basta aggiungere la classe all'elemento per iniziare l'animazione:

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

Animazione fine di callback

Per la seconda domanda (puntando alla fine dell'animazione), ci sono due opzioni:

1. allegare un callback per il transitionEnd evento. L'unico problema è che è necessario ascoltare gli eventi specifici del produttore:

   myDiv.addEventListener('webkitAnimationEnd', callback);

2. Utilizzare un timeout regolare. Il problema con questo è che i tempi non saranno perfetti (ma forse abbastanza vicini).

   setTimeout(callback, 1500);