AngularJS 1.2 - ngAnimate funktioniert nicht

Question

Ich bin neu in der Verwendung von ng-animate mit AngularJS 1.2. Ich bin mir nicht sicher, warum mein ng-animate keinen bestimmten Klassennamen unterstützt, sondern mit dem Standard für eine einfache Einblendung arbeitet, die ich in einem Beispiel gesehen habe.

In diesem Beispiel versuche ich meine ng-belebte Klasse einstellen zu ‚Animation‘: http://plnkr.co/edit/QWQUUVdcLmzLKRvVibqN?p=preview

aber wenn ich den Standard zu verwenden, und meine Klassennamen für Animationen sind nur „.ng eingeben“ und ".ng-leave" scheint die Einblende-Animation gut zu funktionieren.

http://plnkr.co/edit/lEQhMwd6RWmsdmJbosu0?p=preview

Jede Hilfe wäre sehr dankbar, danke!

Answer 1

Das ng-animate-Attribut ist in 1.2 veraltet.

In 1.2 definieren Sie die entsprechenden CSS-Klassen mit einer speziellen Namenskonvention. Wenn Sie einen bestimmten Namen wie "Animation" möchten, müssen Sie diese Klasse zu dem Element hinzufügen, das Sie animieren möchten.

Solange Sie die richtigen CSS-Klassen haben, werden einige Direktiven automatisch animiert. Welche sind hier zu finden? http://docs.angularjs.org/api/ngAnimate

Dies ist der Grund, warum Ihre Animation in Ihrem zweiten Beispiel funktioniert, wenn Sie nur die Klasse ".ng-enter" definieren. Dies würde jedoch automatisch alle Direktiven animieren, die die Enter-Animation unterstützen.

Ich habe Ihr erstes Beispiel aktualisiert, um es mit der Klasse 'Animation' genannt funktioniert:

HTML:

<li ng-repeat="item in items" class="animation">{{item}}</li> 

CSS (Keeping Selektoren ungruppierten für Klarheit):

.animation { 
    -webkit-transition: 1s; 
} 

.animation.ng-enter { 
    opacity: 0; 
} 

.animation.ng-leave { 
    opacity: 1; 
} 

.animation.ng-enter.ng-enter-active { 
    opacity: 1; 
} 

.animation.ng-leave.ng-leave-active { 
    opacity: 0; 
} 

Plunker:http://plnkr.co/edit/J0qJEMmwdzqXzu733fJf?p=preview

Answer 2

Wie gesagt, dass ng-animate veraltet ist, müssen wir die Klasse verwenden. Wenn Sie CSS von AngularJS Website zu kopieren sind http://www.nganimate.org/angularjs/ng-repeat/move dann müssen Sie diese CSS in einem bestimmten Format ändern

Vollständige Detail prüfen Apply Angularjs Animation in 2 minutes

Answer 3

auch wichtig zu erinnern, das Animationsmodul als Abhängigkeit zu Ihrem Modul hinzufügen Definition. Nur für den Fall, dass andere Probleme haben, Animationen funktionieren zu lassen und dies nicht getan hat.

angular.module('myApp', ['ngAnimate']); 

Answer 4

Sie müssen prüfen, ob die Version Ihrer angular.min.js mit der Version von Winkel animate.min.js entspricht.
Ich habe meine auf diese Weise behoben.

Answer 5

Dies ist zusätzlich zu akzeptierten Antwort, für diejenigen, die versuchen, ein Element mit ng-show Richtlinie zu animieren.Dies sind Arten, die verwendet werden müssen:

.animation.ng-hide-remove { 
    transition:2s linear all; 
    opacity:0; 
} 

.animation.ng-hide-remove.ng-hide-remove-active { 
    opacity:1; 
} 

Bitte beachten Sie, dass nicht alle Winkel Richtlinien fügt ng-enter, ng-enter-active, ng-leave and ng-leave-active. Zum Beispiel, ng-show Direktive fügt ng-hide-remove am Anfang der Animation und ng-hide-remove-active am Ende davon. Für weitere Informationen folgen Sie diesem Link: https://www.w3schools.com/angular/angular_animations.asp