Ng-animate non aggiunge le classi ng-enter e ng-leave

Question

Questo è il mio primo progetto che funziona con Angular e ho alcuni problemi con ng-animate. Ho fatto un paio di tutorial e nei tutorial ho fatto tutto a posto. Ora sto usando Angular per un progetto e non riesco proprio a far funzionare correttamente ng-animate. Le classi come "ng-enter" e "ng-leave" non vengono aggiunte ai diversi elementi.

Ho confrontato tutti i tipi di script di lavoro con i miei ma non riesco a scoprire cosa sto facendo male.

mia intestazione:

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

mio HTML:

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

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

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

Il codice HTML della prima pagina principale /:

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

se sono corrette le div con il 'punto caldo' di classe devono ricevere la '-entrare ng' e 'ng-ferie' classi ... ma in qualche modo non lo fanno.

Qualcuno potrebbe aiutarmi con questo? Che cosa sto facendo di sbagliato? Mille grazie !!

Answer 1

paio di cose che dovrebbe pagare cassa:

1. Lei non ha citato quale versione on angolare stai usando. Dalla versione 1.2 l'animazione funziona diversamente. C'è un articolo molto bello riguardo: Remastered Animation
2. Inoltre, la filosofia di ng-animate sta calcolando l'aggiunta e la rimozione delle classi CSS, quindi l'animazione effettiva dovrebbe essere definita dal CSS (che non hai fornito, quindi difficile capire cosa c'è che non va).
3. Inoltre, l'animazione "effettiva" è quella in cui si trovano ng-leave.ng-leave-active e ng-enter.ng-enter-active. Puoi leggere di più su questo nell'articolo.
4. Ecco un esempio molto semplice che dovrebbe dare un vantaggio iniziale: Simple Plunker Example

Answer 2

se si utilizza angolare dalla versione 1.2 è necessario dichiarare classe CSS animazione per l'elemento che si desidera animare e inserire 'ngAnimate' nella vostra modulo.

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