web-dev-qa-db-fra.com

Ng-animate n'ajoute pas les classes ng-enter et ng-leave

C’est mon premier projet avec Angular et j’ai quelques problèmes avec ng-animate. J'ai fait quelques tutoriels et dans les tutoriels, tout s'est bien passé. Maintenant, j'utilise Angular pour un projet et je ne parviens pas à faire fonctionner ng-animate correctement. Les classes telles que "ng-enter" et "ng-leave" ne sont pas ajoutées aux différents éléments. 

J'ai comparé toutes sortes de scripts de travail avec les miens, mais je ne peux tout simplement pas savoir ce que je fais mal. 

Mon en-tête:

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

Mon HTML:

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

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

Mes contrôleurs.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 });
  });

Le code HTML de la première page/page 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>

Si je ne me trompe pas, les divs avec la classe "hotspot" devraient recevoir les classes "ng-enter" et "ng-leave" ... mais d'une manière ou d'une autre, elles ne le font pas. 

Quelqu'un pourrait-il m'aider avec ça? Qu'est-ce que je fais mal? Merci beaucoup !!

angularjsangularjs-ng-repeatng-animate
18
Frank Biemans

Quelques choses que vous devriez payer à la caisse:

  1. Vous n'avez pas mentionné quelle version sur angular utilisez-vous. A partir de la version 1.2, l'animation fonctionne différemment. Il y a un très bon article concernant: Animation remasterisée
  2. En outre, la philosophie ng-animate consiste à programmer l'ajout et la suppression de classes CSS. L'animation proprement dite doit donc être définie par CSS (ce que vous n'avez pas fourni, il est donc difficile de comprendre ce qui ne va pas).
  3. De plus, l'animation "réelle" est l'endroit où le ng-leave.ng-leave-active et le ng-enter.ng-enter-active ont lieu. Vous pouvez en lire plus à ce sujet dans l'article.
  4. Voici un exemple très simple qui devrait vous donner une longueur d’avance: Exemple Simple Plunker
3
Tomer