동적 소스와 함께 ng-include에 애니메이션 남기기

Question

동적 URL (예상대로 작동)을 기반으로 콘텐츠를로드하는 ng-include가 있습니다.

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