6

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

私はこの例を見つけました: 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-animateにjqueryのslideDown/slideUpアニメーションのようなことをさせることは可能ですか?

4

2 に答える 2

2

アニメーションのアプローチは Angular 1.2 で変更されました。違いを説明する記事 ( moo の投稿年) を次に示します。今はもっと簡単です - ng-animate は必要ありません。

于 2013-08-18T21:37:30.467 に答える