2013-07-04 11 views
6

ng-show要素が表示/非表示になったときにアニメーション化しようとしています。 しかし、通常のng-show、instand show/hideのように動作します。AngularJS ng-showのアニメーション

この例が見つかりました:http://jsfiddle.net/Kx4TS/1/ これは問題なく動作します。

まだ、同じng-animate属性と同じCSSを使用しても、私の場合は動作しません。 私は何かする必要があるか、アニメーションがうまくいかない場合はありますか?

私のコードは次のようになります。また、それはNG-アニメーションを作ることが可能である

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

jqueryのslideDown/slideUpアニメーションのようなものを行う:

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

とCSSのですか?

+0

なぜそれが 'item.hasMax()'ですか? 'item'はどこに定義されていますか? – zsong

答えて

5

フィーリングの例では、角度バージョン1.1.4を使用しています。また、新しいバージョンの角度を使用できることを確認してください。私はあなたが最新のバージョンを取得することをお勧めします。今は1.1.5ですが、いくつかの重要なバグ修正があります。

2

アニメーションのアプローチが角度1.2で変更されました。違いを説明する記事(year of moo post)があります。今のほうがはるかに簡単です。アニメーションを必要としません。

関連する問題