Animazione di più oggetti contemporaneamente in AngularJS produce animazione choppy

Question

Durante il tentativo di creare una presentazione che attenua le immagini dentro e fuori ho incontrato questo problema. Quello che ho trovato è che quando si fanno le animazioni una alla volta, sono fluide e senza soluzione di continuità. Tuttavia quando si eseguono più animazioni, diventano instabili e irregolari. Ecco il codice che sto utilizzando per la dissolvenza un'immagine in, mentre allo stesso tempo, dissolvenza un'immagine sovrapposizione out (tutto accade in una direttiva):

var fadeToNextImg = function() { 
    var nextImg = imageHandler.getNextImage(); 
    $animate.addClass(curImage, 'ng-hide'); 
    $animate.removeClass(nextImg, 'ng-hide'); 
    curImage = nextImg; 
}; 

Questo funziona, ma l'animazione produce risultati errati. Le immagini non si dissolvono e si dissolvono in modo uniforme, ma appaiono semplicemente, o prima o poi una delle immagini svanirà. Tuttavia, se mi nido le animazioni in modo che solo uno capita in un momento in poi entrambe le animazioni Excecute perfettamente, uno dopo l'altro, in questo modo:

var fadeToNextImg = function() { 
    var nextImg = imageHandler.getNextImage(); 
    $animate.addClass(curImage, 'ng-hide', function() { 
     $animate.removeClass(nextImg, 'ng-hide'); 
     curImage = nextImg; 
    }); 
}; 

che è grande .. non solo l'effetto desiderato che volevo. Voglio che una immagine si dissolva mentre l'altra immagine sfuma perfettamente sopra di essa! Sto facendo qualcosa di sbagliato? Oppure si tratta di un problema di bug/prestazioni nella libreria Angular Animate?

Un'altra cosa di cui essere a conoscenza, ho anche provato questo utilizzando la manipolazione JQuery DOM al di fuori di una direttiva, e l'animazione era impeccabile. L'ho spostato solo su una direttiva perché quello è il modo angolare di fare le cose. Allora perché fa esplodere le mie animazioni?

Answer 1

Prima di non aver utilizzato $animate, il problema principale che si sta verificando è che $animate.addClass(...) restituisce una "promessa" una volta completata che indica che è ASINCRONA. Ciò significa che ogni animazione successiva deve essere attivata solo dopo che la precedente callback della promessa è stata completata (il che significa che l'immagine è stata finalmente caricata).

In un altro modo, nel modo in cui ce l'hai, i tuoi $animate.addClass(..) vengono eseguiti immediatamente/consecutivamente e non aspettano che il precedente completi l'ergo della choppiness. Inoltre, nel modo in cui lo hai, non credo che funzionerà lo ng-hide. Sembra che il tuo stato css finale in un'immagine sia 'sbiadito' e lo stato css iniziale nell'immagine successiva sia 'sbiadito'. In questo caso, potrebbe essere necessario passare l'oggetto options a addClass(...) per gestire i vari stati da e in css. Alcuni pseudocodice di massima su come utilizzare then la promessa di richiamata s' il $animate:

var fadeToNextImg = function() { 

    var nextImg = imageHandler.getNextImage(); 
    var promise = $animate.addClass(curImage, 'endfade'); 

    promise.then(function(results){ 
    $animate.removeClass(...) 
    curImage = nextImg; 
    }); 

}