Animacja Ng nie dodaje klas ng-enter i ng-leave

Question

To jest mój pierwszy projekt pracujący z Angular i mam pewne problemy z ng-animate. Zrobiłem kilka tutoriali iw tutorialach wszystko działało dobrze. Teraz używam Angulara do projektu i nie mogę po prostu uzyskać poprawnego działania ng-animate. Klasy takie jak "ng-enter" i "ng-leave" nie są dodawane do różnych elementów.

Porównałem wszystkie skrypty robocze z moimi, ale po prostu nie mogę się dowiedzieć, co robię źle.

Mój nagłówek:

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

Moje HTML:

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

Moi 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' 
     }); 
    } ]); 

Moi 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 }); 
    }); 

HTML pierwszej/głównej stronie:

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

Jeśli jestem skorygować div z klasą „hotspot” powinien otrzymać „NG-enter” i „NG-urlopu” zajęcia ... ale jakoś nie.

Czy ktoś może mi w tym pomóc? Co ja robię źle? Wielkie dzięki!

Answer 1

Kilka rzeczy należy zwrócić kasę:

1. nie wspomniałeś, która wersja na kanciasty używasz. Od wersji 1.2 animacja działa inaczej. Jest bardzo dobry artykuł dotyczący: Remastered Animation
2. Ponadto, filozofia ng-animate jest taktowana dodawaniem i usuwaniem klas (klas) CSS, więc rzeczywista animacja powinna być zdefiniowana przez CSS (czego nie podałeś, więc trudne do wykrycia, co jest nie tak).
3. Co więcej, "aktualna" animacja ma miejsce w przypadku ng-leave.ng-leave-active i ng-enter.ng-enter-active. Możesz przeczytać więcej na ten temat w artykule.
4. Tutaj jest bardzo prosty przykład, który powinien dać fory: Simple Plunker Example

Answer 2

jeśli używasz kątowa od wersji 1.2 należy zadeklarować klasę CSS animację dla elementu, który chcesz animować i wstawić „ngAnimate” w swojej moduł.

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