ngShow/ngHideのみをアニメーション化するようにngAnimateに通知する

Question

$scopeプロパティに基づいて表示/非表示する<div>のAngularJS 1.2.2 Webアプリケーションがあります。 ngAnimateモジュールを使用して、<div>の表示と非表示をアニメーション表示します。

<div id="square" ng-show="showSquare" class="animate-shiny"></div> 

また、私はこの<div>に配置したいクラスを持っており、このために私はngClassを使用しています。

<div id="square" ng-show="showSquare" class="animate-shiny" ng-class="{ cool: extraCool }"></div> 

そして、それはそう起こるように、時にはそのクラスは<div>は/非表示の表示されたときと同じ瞬間に適用されます。これにより、アニメーションの表示/非表示がもう機能しなくなります。確かにngAnimateをそのアニメーションに使用したくない場合でも、ngClassはもっとアニメーション化するのが面白いです。

Here's a Plnkr that demonstrates the behavior。表示/非表示ボタンをクリックすると大きな効果が得られます。クールクールボタンをクリックすると効果的ですが、これらの2つを組み合わせたボタンは、アニメーションの表示/非表示を解除します。

これを修正するにはどうすればよいですか？手動で$animateを指定しなくても、それを行うことはできますか？

ありがとうございます！

Answer 1

問題は、クラスを使用してアニメーションを作成しようとしているときに、アニメーション化するタイミングを区別しないことです。つまり、トランジションエフェクトは一般的なクラスに適用され、ng-animateはそのクラスが参照されるたびに作業を行う必要があると認識します。ここで

#square { 
    width: 50px; 
    height: 50px; 
    background-color: blue; 
    transition: 0.4s all ease-out; 
} 

#square.cool { 
    box-shadow: 0 0 10px 3px green; 
    background-color: lightgreen; 
} 

#square.ng-hide-add, #square.ng-hide-remove 
{ 
    display: block !important; 
} 

#square.ng-hide-remove, #square.ng-hide-add.ng-hide-add-active{ 
    margin-left: -80px; 
    opacity: 0; 
} 

#square.ng-hide-remove.ng-hide-remove-active, #square.ng-hide-add{ 
    margin-left: 0; 
    opacity: 1; 
} 

が新しいplunkrので、あなたはそれで遊ぶことができます：私はあなたが望むものを、非常に近い、そうでない場合は、正確に得るためにあなたのCSSビットを変更 http://plnkr.co/edit/a7wiZfCrEGCXfIDSvF9r?p=preview

あなただけのアニメーション化したい場合表示/非表示にし、色の遷移を望まない場合は、単に#square.ng-hide-add, #square.ng-hide-remove宣言への遷移を移動してください。