Animacje w AngularJS ng-show

Question

Próbuję uzyskać element ng-show do animowania, gdy stanie się widoczny/ukryty. Ale to po prostu działa jak normalny show, instand show/hide.

Znalazłem ten przykład: http://jsfiddle.net/Kx4TS/1/ który działa dobrze.

Jednak jeśli używam tego samego atrybutu ng-animate i tego samego css, to nie działa w moim przypadku. Czy jest coś jeszcze, co muszę zrobić lub przypadki, w których animacje nie działają?

mój kod wygląda następująco:

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

i CSS jest:

.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; 
    } 

Ponadto, jest to możliwe, aby ng-animate zrobić rzeczy jak animacje jQuery slideDown/slideUp?

Answer 1

Przykład fiddle wykorzystuje Angular w wersji 1.1.4. Upewnij się, że dostępna jest również nowsza wersja kątowa. Proponuję uzyskać najnowszą wersję. Obecnie jest to wersja 1.1.5, która ma kilka ważnych poprawek.

Answer 2

Metoda animacji została zmieniona za pomocą Angular 1.2. Oto artykuł (year of moo post), który wyjaśnia różnice. Teraz jest o wiele prostsze - nie wymaga ng-animate.