Rozpocznij animację CSS3 przy użyciu Javascript z zdarzeniem onclick

Question

Pracuję nad aplikacją webową, która używa animacji CSS3 dla niektórych fajnych efektów, ale nie mogę wymyślić, aby aktywować je zdarzeniem onclick.

to Animacja CSS3: (Nazwa DIV ten jest dodawany do jest #smspopup)

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

A to moja JavaScript, gdzie po prostu nie może dowiedzieć się, co trzeba, aby ją Idzie

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

I jeszcze jedną rzeczą, którą chcę zrobić, to opóźnienie funkcji o 1,5 sekundy do zakończenia animacji. Ktoś ma jakiś pomysł?

Answer 1

Zaczynając animacji

Start, stosując klasę zamiast identyfikatora. Zmienić CSS do tego:

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

I dodać class=smspopup do elementu smspopup.

Następnie wewnątrz uchwytu (cancel_sms?), Wystarczy dodać klasę do elementu, aby rozpocząć animację:

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

Animacja koniec zwrotna

Na drugie pytanie (kierowania końca animacji) dostępne są dwie opcje:

1. Dołączanie oddzwonienia do numeru transitionEnd wydarzenie. Jedyny problem polega na tym, że trzeba słuchać zdarzeń specyficznych dla dostawcy:

   myDiv.addEventListener('webkitAnimationEnd', callback);

2. pomocą zwykłego limitu czasu. Problem polega na tym, że czas nie będzie idealny (ale może wystarczająco blisko).

   setTimeout(callback, 1500);