Pozostaw animację na ng-include z dynamicznym źródłem

Question

Mam ng-include, który ładuje zawartość na podstawie dynamicznego adresu URL (działa zgodnie z oczekiwaniami).

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

Problem pojawia się, gdy próbuję animowanie enter i leave treści (zgodnie z kanciastych docs, to są dwa zdarzenia ng obejmują przewiduje animowanie on).

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

enter działa zgodnie z oczekiwaniami, ale leave nie jest. Właśnie widzę, że zawartość znika natychmiast (nie znika), gdy templateUrl jest zmieniony w moim kontrolerze.

Wszelkie pomysły?

Answer 1

stworzyłem this plunker z dynamiczną zawartością, i to działa dobrze.
Spróbuj to sprawdzić.
Myślę, że twój problem może być związany z pojemnikiem lub pozycją elementów.
Początkowy kod został pobrany from here. Znajdziesz tam więcej szczegółów na temat animacji w programie angularjs 1.2+.

Answer 2

Spróbuj użyć:

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