Angular Javascript 애니메이션은 ng-if와 함께 작동하지만 ng-show와 함께 작동하지 않습니다.

Question

저는 각도 애니메이션을 실험 해 왔으며 Angular JavaScript 기반 애니메이션이 ng-if를 사용하여 트리거되지 않는다는 결론을 얻었습니다. 필자는 불일치를 보여주는 간단한 Plunkr을 개발했습니다. 근본적으로,이 문제는 DOM에 요소를 추가하거나 제거하지 않고 (ng-if) ng-show를 사용하려는 것입니다. 애니메이션을 적용 할 항목 중 하나가 시작하려는 HTML5 비디오이기 때문입니다. 페이지로드시 사전로드. 다음과 같이 Plunkr의 코드는 다음과 같습니다 지시어는 애니메이션 것

HTML

<button ng-click="on4=!on4">JS If Transition</button> 
<div class="js-if-element" ng-if="on4">I'm animated by JS and ng-if</div> 

<button ng-click="on5=!on5">JS Show Transition</button> 
<div class="js-show-element" ng-show="on5">I'm animated by JS and ng-show</div> 

JS를

app.animation('.js-if-element', function() { 
    return { 
    enter : function(element, done) { 
     element.css('opacity',0); 
     jQuery(element).animate({ 
     opacity: 1 
     }, done); 

     return function(isCancelled) { 
     if(isCancelled) { 
      jQuery(element).stop(); 
     } 
     } 
    }, 
    leave : function(element, done) { 
     element.css('opacity', 1); 
     jQuery(element).animate({ 
     opacity: 0 
     }, done); 

     return function(isCancelled) { 
     if(isCancelled) { 
      jQuery(element).stop(); 
     } 
     } 
    } 
    } 
}); 

app.animation('.js-show-element', function() { 
    return { 
    enter : function(element, done) { 
     element.css('opacity',0); 
     jQuery(element).animate({ 
     opacity: 1 
     }, done); 

     return function(isCancelled) { 
     if(isCancelled) { 
      jQuery(element).stop(); 
     } 
     } 
    }, 
    leave : function(element, done) { 
     element.css('opacity', 1); 
     jQuery(element).animate({ 
     opacity: 0 
     }, done); 

     return function(isCancelled) { 
     if(isCancelled) { 
      jQuery(element).stop(); 
     } 
     } 
    } 
    } 
}); 

이제와이 Plunkr의 요소를 코드를 실행하면 경우 NG-는 불투명도입니다 ng-show가있는 요소는 애니메이션을 트리거하지 않습니다. 또한 Plunkr에서 키 프레임/CSS 전환과 ng-show 및 ng-if 작업을 사용하여 두 시나리오를 모두 테스트했습니다. http://plnkr.co/edit/yzXYJnMrvYkWBnMtMLAm?p=preview

Answer 1

나는 이것이 오래된 것으로 알고 있지만 다른 사람이 그것을 숨기려면 찾습니다. 입력을 사용하지 마십시오. 휴가. beforeAddClass 및 beforeRemoveClass을 사용해야합니다.