는

Question

나는이 HTML이 :

<div ng-if="true"> 
    <div ng-show="hideMe"> 
     <div class="random" ng-include="'template.html'"></div> 
    </div> 
    </div> 

    <br> 
    <button ng-click="hideMe = false">hide</button> 
    <button ng-click="hideMe = true">show</button> 

을 그리고 나는이 스타일이 있습니다

.random.ng-enter { 
    transition: 2s ease all; 
    opacity: 0; 
    transform: translateY(100%); 
} 

.random.ng-enter.ng-enter-active { 
    opacity: 1; 
    transform: translateY(0); 
} 

.random.ng-leave { 
    transition: 10s ease all; 
    opacity: 1; 
    transform: translateX(0); 
} 

.random.ng-leave.ng-leave-active { 
    opacity: 0; 
    transform: translateX(50%); 
} 

템플릿 :

<p>a simple paragraph</p> 

<div ng-repeat="user in info"> 
    {{user.nome}} 

</div> 

먼저 페이지를로드하고 ng-enter-active는 완벽하게 작동하지만 버튼을 숨기거나 표시 할 때 ng-enter 및 ng-leave는 작동하지 않습니다. 내가 아는 사람이 누구인지 아시겠습니까?

고맙습니다.

여기 방금 노출 한 것을 보여주는 플 런커가 있습니다.

DEMO

Answer 1

편집하면 HTML과 같습니다 :

<div ng-if="true"> 
    <div ng-if="hideMe" class="random"> 
     <div ng-include="'template.html'"></div> 
    </div> 
    </div> 

이 작동합니다.

클래스 이/숨기기를 표시하고