Starten Sie CSS3-Animation mit Javascript mit onclick-Ereignis

Question

Ich arbeite an einer Webanwendung, die CSS3-Animationen für einige nette Effekte verwendet, aber ich kann nicht herausfinden, um sie mit einem onclick-Ereignis zu aktivieren.

ist dies die CSS3 Animation: (Der Name des DIV dies zugegeben wird, ist #smspopup)

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

Und das ist mein Javascript, wo ich kann einfach nicht herausfinden, was ich brauche, es zu bekommen gehen

Und noch etwas, was ich tun möchte, ist die Verzögerung der Funktionen 1,5 Sekunden, bis die Animation beendet ist. Irgendjemand eine Idee?

Answer 1

Starten der Animation

Beginnen Sie mit einer Klasse anstelle einer ID. Ändern Sie den CSS dazu:

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

Und fügen class=smspopup zum smspopup Element.

Als nächstes innerhalb des Handlers (cancel_sms?), Fügen Sie einfach die Klasse auf das Element um die Animation zu beginnen:

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

Animations Ende Rückruf

Für die zweite Frage (Targeting das Ende die Animation), gibt es zwei Möglichkeiten:

1. auf die einen Rückruf Attach ÜbergangEnde Ereignis. Das einzige Problem dabei ist, dass Sie auf herstellerspezifische Ereignisse hören müssen:

   myDiv.addEventListener('webkitAnimationEnd', callback);

2. Verwenden Sie einen regelmäßigen Timeout. Das Problem dabei ist, dass das Timing nicht perfekt ist (aber vielleicht nahe genug).

   setTimeout(callback, 1500);