Lascia l'animazione su ng-include con sorgente dinamica

Question

Ho un ng-include che sta caricando il contenuto basato su un url dinamico (funzionante come previsto).

<ng-include class="my-content-area" src="templateUrl"></ng-include> 

Il problema viene quando sto cercando di animare la enter e leave del contenuto (secondo la documentazione angolari, questi sono i due eventi ng-includere prevede per l'animazione su).

.my-content-area.ng-enter, 
.my-content-area.ng-leave { 
    transition: all 500ms; 
}  
.my-content-area.ng-enter { 
    opacity:0; 
} 
.my-content-area.ng-enter.ng-enter-active { 
    opacity:1; 
}  
.my-content-area.ng-leave { 
    opacity:1; 
} 
.my-content-area.ng-leave.ng-leave-active { 
    opacity:0; 
} 

Il enter funziona come previsto, ma il leave non è. Sto solo vedendo il contenuto scomparire immediatamente (non svanire) quando il templateUrl viene modificato nel mio controller.

Qualche idea?

Answer 1

ho creato this plunker con contenuti dinamici, e funziona bene.
Prova a controllarlo.
Penso che il tuo problema potrebbe essere correlato al contenitore o alla posizione degli elementi.
Il codice iniziale è stato preso from here. Qui puoi trovare ulteriori dettagli sulle animazioni in angularjs 1.2+.

Answer 2

Provare a utilizzare:

.my-content-area.ng-leave { 
    -webkit-transition: all 500ms; /* Safari/Chrome */ 
    transition: all 500ms; 
}