Оставить анимацию на ng-include с динамическим источником

Question

У меня есть ng-include, который загружает контент на основе динамического url (работает как ожидалось).

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

Проблема возникает, когда я пытаюсь оживить enter и leave содержания (в соответствии с угловыми документами, те два события нг-включают обеспечивает анимацию на).

.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 работает, как ожидалось, но leave нет. Я просто вижу, что содержимое исчезает сразу (не исчезает), когда templateUrl изменен в моем контроллере.

Любые идеи?

Answer 1

Я создал this plunker с динамическим содержимым, и она отлично работает.
Постарайтесь проверить это.
Я думаю, что ваша проблема может быть связана с контейнером или с положением элементов.
Исходный код был принят from here. Там вы можете найти более подробную информацию об анимациях в angularjs 1.2+.

Answer 2

Попробуйте использовать:

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