ngShow의 애니메이션이 처음으로 건너 뜁니다.

Question

간단한 jQuery slideUp/slideDown을 사용하여 ng-show가 각도 (버전 1.3.2)로 표시된 트위터 부트 스트랩 패널 바디 열기/닫기를 애니메이션으로 적용하려고합니다.

은 (내가 먼저 CSS 전환과에서했지만, 때문에 알 수없는 몸 높이의 그것을 할 수 있고, 최대 높이 애니메이션은 나에게 폐쇄에 문제를주고 있었다, 그래서 나는 JS와 함께 가기로 결정)

I을 애니메이션을 만드는 데 성공했지만 처음으로 작동하지 않습니다. 애니메이션이 전환되었습니다. 그래서 첫 번째 본문이 애니메이션으로 표시되지 않습니다. 그러면 숨기기가 애니메이션으로 표시되고 그 후에 모든 것이 잘됩니다 (애니메이션 표시 및 숨김 모두).

자바 스크립트 부분 :

app.animation('.animate-panel-body-slide', function(){ 
return { 
    addClass : function(element, className, done) { 
     $(element).slideUp(400, done); 
     return function(isCancelled) { 
      if(isCancelled) { 
       $(element).stop(); 
      } 
     } 
    }, 
    removeClass : function(element, className, done) { 
     $(element).slideDown(400, done); 
     return function(isCancelled) { 
      if(isCancelled) { 
       $(element).stop(); 
      } 
     } 
    } 
} 
}); 

HTML 부분 :

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     HEADING 
    </div> 
    <div class="panel-body animate-panel-body-slide" ng-show="isPanelOpen"> 
     SOME HTML IN BODY... 
    </div> 
</div> 

내가 뭔가를 놓치고 있습니까?

Answer 1

ng-hide (display: none)이 요소에서 제거 되었기 때문에 removeClass이 실행될 때 그 것이 발생합니다.

처음으로 요소가 발생하면 display: block이 표시되어 요소가 즉시 나타나고 slideDown 애니메이션이 표시되지 않음을 의미합니다.

패널이 닫히면 slideUp 애니메이션은 요소에 style="display: none;"을 추가합니다. 이는 다음에 열 때 다음 요소가 예상대로 작동 함을 의미합니다.

이 같이 수동으로 추가하는 경우 :

는

<div class="panel-body animate-panel-body-slide" ng-show="isPanelOpen" style="display: none"> 

그것은 한 패널이 항상 폐쇄 시작으로 작동합니다.

당신은 당신이 추가 할 수있는 두 경우 모두 작동하려면 :

removeClass: function(element, className, done) { 

    element.css('display', 'none'); 
    element.slideDown(400, done); 

    ...