ngAnimate in der Version 1.3.10 funktioniert nicht

Question

Ich verwende die folgenden Anweisungen: ngAnimate Angularjs Aber etwas funktioniert immer noch nicht. Ich sehe keinen Effekt.

Hier mein Code:

auf der Seite Ich habe das folgende Skript enthält (beide sind für 1.3.10 Version von AngularJS):

<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> 

Mein app.js ist folgende:

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

der Code der Seite I Aspekt Verwendung Animation ist:

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

Und schließlich die CSS ist

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

Der Absatz, erscheinen und korrekt verschwinden, aber keine Animation gezeigt ... Was mir fremd ist, ist, dass ich in CSS definiert die Klassen sehen aspected in das DOM (über Tools für Entwickler in Chrome) wenn die Bedingung verifiziert ist oder nicht .. aber keine Klassen verwendet wird ...

Was ist los?

einfache Plunker Folgende:

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

Danke

Answer 1

Ich war mit falschen CSS-Klassen ... Correct Klassen sind verwenden

/* 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; 
} 

Und ich ersetzt

ng-show 

mit

ng-if 

Answer 2

Sie müssen sich auf Original-Elementklasse transition CSS gesetzt haben nicht auf die enter/leave Versionen

Dies ist, wie ngAnimate weiß, ob Es muss Elementanimationen beim Rendern von DOM verwalten.

Regel hinzufügen

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

und entfernen Sie den Übergang von:

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