Änderung der Winkelverzögerungsroute, bis alle Animationen beendet sind

Question

Ich versuche eine Routenaktualisierung zu verzögern, bis die Animationen beendet sind. Ich durchlaufe die Elemente und füge eine Klasse hinzu, der eine CSS-Animation zugeordnet ist. Ich kann nicht darauf warten, dass alle Animationen fertig sind, es scheint nur auf den ersten zu warten.

Irgendwelche Ideen, was ich falsch mache, oder gibt es einen besseren Weg, dies zu tun?

Danke.

Answer 1

Wenn ich $ animate.addClass verwenden für alle Elemente, sondern nur ein einziges Versprechen für das letzte Element zurückkehren es hat immer noch das gleiche Problem, wie seine Überschreibungs $ belebtes oder etwas ...

Ich habe festgestellt, ein Umgehen Sie das Problem, indem Sie die Dauer und die Verzögerungszeiten für die Elemente addieren und dann nur $ animate.addClass für die mit der längsten Dauer verwenden.

delay: function($animate){ 
    var $element = null, 
     duration = 0; 

    $('.animate').each(function(){ 
     var currentDuration = parseFloat($(this).css('animation-duration')) + parseFloat($(this).css('animation-delay')); 
     if(currentDuration >= duration){ 
      duration = currentDuration; 
      $element = this; 
     } 
    }).not($element).addClass('animate-out'); 

    return $element ? $animate.addClass($element, 'animate-out') : true; 
} 

Ich bin sicher, dass es einen besseren Weg geben muss, dies zu tun?