バージョン1.3.10でngAnimateが機能しない

Question

私は次の手順を使用しています：ngAnimate Angularjs しかし、何かが動作しません。私は何の効果も見ません。ここで

私のコード：私は次のスクリプトが含まれているページで

（いずれもangularjsの1.3.10バージョンのためのものです）：

<script type="text/javascript" src="/Scripts/angular.min.js"></script> 
<script type="text/javascript" src="/Scripts/angular-animate.min.js"></script> 
<script type="text/javascript" src="/Scripts/Angular/app.js"></script> 

私app.js次のとおりです。

(function (angular) { 
    var public_area = 
     angular.module("public-area", ['ngResource', 'ngAnimate']) 
     ... 

ページIアスペクト利用アニメーションのコードは次のとおりです。

<p ng-show="my_condition" class="scale-animation">...</p> 

そして最後に、CSSは

.scale-animation.enter, 
.scale-animation.leave { 
    -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    position:relative; display:block; 
} 

.scale-animation-enter, 
.scale-animation-leave.scale-animation-leave-active { 
    -webkit-transform:scaleY(0); 
    -moz-transform:scaleY(0); 
    -ms-transform:scaleY(0); 
    -o-transform: scaleY(0); 
    transform:scaleY(0); height:0; opacity:0; 
} 

.scale-animation-leave, 
.scale-animation-enter.scale-animation-enter-active { 
    -webkit-transform:scaleY(1); 
    -moz-transform:scaleY(1); 
    -ms-transform:scaleY(1); 
    -o-transform: scaleY(1); 
    transform:scaleY(1); height:30px; opacity:1; 
} 

段落で、表示され、正しく消えますが、何のアニメーションが表示されません... 何私には奇妙であることは私はCSSで定義されたクラスを参照してくださいすることaspectedということです条件が満たされているかどうかにかかわらず、クラスが使用されていない場合のDOM（Chromeの開発者向けツールを介して）...

何が問題なのですか？シンプルPLUNKER後

：

https://plnkr.co/edit/atK7z5rWzDSEccB2HG0s?p=preview

はありがとう

あなたは transition CSSが enter/leaveバージョン

ngAnimateがあれば知っているどのようにこれがある上にないオリジナルの要素クラスに設定されている必要があり

Answer 1

...使用する正しいクラスが

/* SCALE */ 
.scale-animation.ng-enter, 
.scale-animation.ng-leave { 
    -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    position:relative; display:block; 
} 

.scale-animation.ng-enter, 
.scale-animation.ng-leave.ng-leave-active { 
    -webkit-transform:scaleY(0); 
    -moz-transform:scaleY(0); 
    -ms-transform:scaleY(0); 
    -o-transform: scaleY(0); 
    transform:scaleY(0); 

    opacity:0; 
} 

.scale-animation.ng-leave, 
.scale-animation.ng-enter.ng-enter-active { 
    -webkit-transform:scaleY(1); 
    -moz-transform:scaleY(1); 
    -ms-transform:scaleY(1); 
    -o-transform: scaleY(1); 
    transform:scaleY(1); 

    opacity:1; 
} 

あり、私が交換

ng-show 

と

ng-if 

Answer 2

DOMをレンダリングしながら要素アニメーションを管理する必要があります。

ルール

.scale-animation{ 
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
} 

を追加してから移行を削除します。私は間違っているCSSクラスを使用していた

.scale-animation.enter, 
.scale-animation.leave{ 
    /* remove transition */ 
}