AngularJS中的動畫ng-show

Question

我試圖讓ng-show元素在變爲可見/隱藏時進行動畫製作。 但它只是像一個正常的顯示，即時顯示/隱藏。

我發現這個例子：http://jsfiddle.net/Kx4TS/1/ 它工作正常。

但是，如果我使用相同的ng-animate屬性和相同的CSS，它不適用於我的情況。 還有什麼我需要做的或動畫不起作用的情況？

我的代碼看起來是這樣的：

<div style="" ng-show="item.hasMax()" 
    class="box" ng-animate="{show: 'fadeIn', hide:'fadeOut'}"> 

和CSS是：

.fadeIn-setup,.fadeOut-setup { 
      -webkit-transition: 1s linear opacity; 
      -moz-transition: 1s linear opacity; 
      -o-transition: 1s linear opacity; 
      transition: 1s linear opacity; 
     } 
    .fadeIn-setup{ 
     opacity:0; 
    } 
    .fadeOut-setup{ 
     opacity:1; 
    } 
    .fadeIn-setup.fadeIn-start { 
     opacity: 1; 
    } 
    .fadeOut-setup.fadeOut-start{ 
     opacity:0; 
    } 

而且，是有可能使NG-動畫做的東西，如jQuery的了slideDown /效果基本show動畫？

Answer 1

小提琴示例使用Angular版本1.1.4。確保你也有更新版本的角度可用。我建議你獲得最新版本。現在是1.1.5，它有一些重要的bug修復。

Answer 2

動畫方法隨着Angular 1.2而改變。這裏有一篇文章（year of moo post）解釋了這些差異。現在更簡單 - 不需要ng-animate。