Ng-animate fügt die ng-enter und ng-leave Klassen nicht hinzu

Question

Dies ist mein erstes Projekt, das mit Angular arbeitet und ich habe einige Probleme mit ng-animate. Ich habe ein paar Tutorials gemacht und in den Tutorials habe ich alles gut funktioniert. Jetzt benutze ich Angular für ein Projekt und ich kann einfach nicht ng-animieren um richtig zu arbeiten. Die Klassen wie "ng-enter" und "ng-leave" werden nicht zu den verschiedenen Elementen hinzugefügt.

Ich habe alle Arten von Arbeitsskripten mit meinen verglichen, aber ich kann einfach nicht herausfinden, was ich falsch mache.

Mein Kopf:

<link rel="stylesheet" href="css/app.css"> 

<script src="js/libraries/jquery-2.1.1.min.js"></script> 
<script src="js/libraries/angular.js"></script> 
<script src="js/libraries/angular-animate.js"></script> 
<script src="js/libraries/angular-resource.js"></script> 
<script src="js/libraries/angular-route.js"></script> 

<script src="js/app.js"></script> 
<script src="js/controllers.js"></script> 
<script src="js/services.js"></script> 

Mein HTML:

<div class="view-container"> 
<div ng-view class="{{pageclass}} view-frame"></div> 
</div> 

Mein app.js

'use strict'; 

/* App Module */ 

var engineShowcaseApp = angular.module('engineShowcaseApp', [ 
    'ngRoute', 
    'ngAnimate', 
    'engineShowcaseController', 
    'engineShowcaseServices' 
]); 

engineShowcaseApp.config(['$routeProvider', 
    function ($routeProvider) { 
    $routeProvider. 
     when('/', { 
     templateUrl: 'partials/main.html', 
     controller: 'MainCtrl' 
     }). 
     when('/chapters/:chapterID', { 
     templateUrl: 'partials/chapter.html', 
     controller: 'ChapterCtrl' 
     }); 
    } ]); 

Mein controllers.js:

'use strict'; 

/* Controllers */ 

var engineShowcaseController = angular.module('engineShowcaseController', []); 

engineShowcaseController.controller('MainCtrl', function ($scope, Main) { 
    $scope.pageclass = "page-home"; 
    $scope.hotspots = Main.query(); 
}); 


    engineShowcaseController.controller('ChapterCtrl', function ($scope, $routeParams, Main) { 
    $scope.pageclass = "page-chapter"; 
     $scope.chapter = Main.get({ chapterID: $routeParams.chapterID }); 
    }); 

Der HTML-Code des ersten/main pagina:

<div 
    ng-repeat="hotspot in hotspots" 
    class="hotspot hotspot-{{hotspot.id}}" 
    data-nextup="chapter-{{hotspot.id}}" 
    data-startframe="{{hotspot.startFrame}}" 
    data-endframe="{{hotspot.endFrame}}"> 

    <a href="#/chapters/{{hotspot.chapterID}}"> 
     {{hotspot.label}} 
    </a> 
</div> 

Wenn ich die divs mit der Klasse ‚Hotspot‘ korrigieren soll die ‚ng eingeben‘ und ‚ng-leave‘ Klassen erhalten ... aber irgendwie tun sie das nicht.

Kann mir jemand dabei helfen? Was mache ich falsch? Vielen Dank !!

Answer 1

Paar Dinge sollten Sie Kasse bezahlen:

1. Sie nicht erwähnt, welche Version auf Winkel verwenden Sie. Ab Version 1.2 funktioniert die Animation anders. Es ist ein sehr guter Artikel Grüße: Remastered Animation
2. Auch die ng-belebte Philosophie ist das Hinzufügen und Entfernen von CSS-Klasse Timing (n), so sollte die eigentliche Animation von CSS definiert werden (die Sie nicht liefern, so schwer zu sagen, was falsch ist).
3. Außerdem ist die "eigentliche" Animation, wo die ng-leave.ng-leave-active und ng-enter.ng-enter-active stattfinden. Sie können mehr darüber in dem Artikel lesen.
4. Hier ist ein sehr einfaches Beispiel, das Ihnen einen Vorsprung geben soll: Simple Plunker Example

Answer 2

, wenn Sie verwenden Angular ab Version 1.2, Sie CSS-Klasse deklarieren müssen Animation für Elemente wollen animieren und Einfügen ‚ngAnimate‘ in Ihrem Modul.

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

.element.ng-enter { 
 
    transition: all linear 500ms; 
 
    opacity: 0; 
 
} 
 
.element.ng-enter-active { 
 
    opacity: 1; 
 
} 
 
.element.ng-leave { 
 
    transition: all linear 500ms; 
 
    opacity: 1; 
 
    transform: translate3d(0, 0, 0); 
 
} 
 
.element.ng-leave-active { 
 
    opacity: 0; 
 
    transform: translate3d(100px, 0, 0); 
 
}