fügen Sie animate.css Klassen dann entfernen Sie das Element mit entfernen

Question

Ich versuche, einige css-Klassen auf meinem Label/Kontrollkästchen Tick hinzufügen, dann entfernen Sie die Klassen und entfernen Sie das Element, sobald es überprüft wurde. Obwohl ich kämpfe und nur das eine oder andere schaffen kann.

$(function() { 
    $("label[for='<%= @todo.id %>']").click(function() { 
     el = $("#todo-container-<%= @todo.id %>"); 
     el.addClass('animated fadeOut'); 
     el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', 
     function (e) { 
      el.removeClass('animated fadeOut'); 
      el.remove(); 
     }); 
    }); 
}); 

Hier versuche ich (in meiner complete.js.erb-Datei) auf dem Etikett klicken (die das Kontrollkästchen überprüft) fügen Sie die animierten und fadeOut Klassen in den Behälter und dann die Klasse entfernen und als Containerelement, nachdem es verblasst ist.

Kann mir jemand helfen? Mein Code macht nur 1 meiner 2 Anforderungen

Answer 1

Sie bei der "animationend" Ereignis-Listener aussehen könnte:

el.addEventListener("animationend", function().. , false); 

Weitere Informationen finden Sie finden Sie hier:

W3Schools animationend Event