Animation auf ng-include mit dynamischer Quelle belassen

Question

Ich habe eine ng-include, die Inhalte basierend auf einer dynamischen URL lädt (funktioniert wie erwartet).

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

Das Problem kommt, wenn ich versuche, die enter und leave des Inhalts zu animieren (entsprechend den Winkel docs, die die beiden Ereignisse sind ng-umfassen zum Animieren auf bereitstellt).

.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; 
} 

Die enter arbeitet wie erwartet, aber die leave nicht. Ich sehe gerade den Inhalt verschwinden sofort (nicht verblassen), wenn die templateUrl in meinem Controller geändert wird.

Irgendwelche Ideen?

Answer 1

I erstellt this plunker mit dynamischem Inhalt, und es funktioniert gut.
Versuchen Sie es zu überprüfen.
Ich denke, Ihr Problem könnte mit dem Container oder der Position der Elemente zusammenhängen.
Der ursprüngliche Code wurde from here genommen. Dort finden Sie weitere Details zu Animationen in angularjs 1.2+.

Answer 2

Versuchen Sie es mit:

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