Animationen in AngularJS ng-show

Question

Ich versuche, ein ng-show-Element zu animieren, wenn es sichtbar/versteckt wird. Aber es verhält sich wie eine normale ng-show, instand show/hide.

Ich fand dieses Beispiel: http://jsfiddle.net/Kx4TS/1/ was gut funktioniert.

noch, wenn ich das gleiche ng-animate-Attribut und die gleiche CSS verwenden, funktioniert es in meinem Fall nicht. Gibt es noch etwas, das ich tun muss oder Fälle, in denen Animationen nicht funktionieren?

mein Code sieht wie folgt aus:

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

und die CSS ist:

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

Auch ist es möglich, ng-belebtes tun Sachen wie die jquery slidedown/slideUp Animationen zu machen?

Answer 1

Das Geige Beispiel verwendet Angular Version 1.1.4. Stellen Sie sicher, dass Sie auch eine neuere Version von eckig zur Verfügung haben. Ich schlage vor, Sie erhalten die neueste Version. Gerade jetzt ist es die 1.1.5, die einige wichtige Bugfixes hat.

Answer 2

Der Animationsansatz wurde mit Angular 1.2 geändert. Hier ist ein Artikel (year of moo post), der die Unterschiede erklärt. Es ist jetzt viel einfacher - erfordert nicht ng-animieren.