Angular Javascript animation with ng-if但不能顯示

Question

我一直在試驗角動畫，並得出結論：使用ng-if不會觸發基於JavaScript的角動畫。我開發了一個簡單的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-if指令將動畫是不透明而帶有ng-show的元素不會觸發動畫。另外，在Plunkr中，我測試了使用關鍵幀/ CSS轉換以及ng-show和ng-if的兩種情形http://plnkr.co/edit/yzXYJnMrvYkWBnMtMLAm?p=preview

Answer 1

我知道這是舊的，但是讓別人發現它顯示和隱藏不要使用enter離開。您必須使用beforeAddClass和beforeRemoveClass。