Javascript | transitionend nicht feuernd

Question

Ich versuche gerade, mein eigenes Javascript-Bekanntmachungssystem zu bilden, das Javascript und CSS3 verwendet und seine Animationen benutzt.

Ich möchte erkennen, wenn der Elementübergang beendet ist, damit ich das Element aus dem DOM entfernen kann.

Die Animation heißt animate-out und ist eine benutzerdefinierte, die ich in CSS3 mit nur 2 Keyframes gemacht habe.

Ich habe eine Schließen-Schaltfläche auf der Nachricht, die, wenn ich darauf klicke, fügt eine Klasse von is-closed. Sobald die Animation abgeschlossen ist, möchte ich das erkennen können, was ich gerade über eine console.log('finished'); herausfinden möchte, aber es scheint, als ob das Ereignis überhaupt nicht ausgelöst wird.

Hier ist meine aktuellen Code:

const close = document.querySelector('.close'); 
const notice = document.querySelector('.notice') 

close.addEventListener('click', function() { 
    notice.classList.add('is-closed'); 
}); 

notice.addEventListener('webkitTransitionEnd', function() { 
    console.log('finished'); 
}); 

notice.addEventListener('transitionend', function() { 
    console.log('finished'); 
}); 

Answer 1

Wenn Sie Keyframes werden dann Animation Sie verwenden, und nicht Übergänge.

Das entsprechende Ereignis ist animationend

Using animation events