Ng-animate не добавляет классы ng-enter и ng-leave

Это мой первый проект, работающий с Angular, и у меня есть некоторые проблемы с ng-animate. Я сделал несколько учебников, и в учебниках я все хорошо работал. Теперь я использую Angular для проекта, и я просто не могу заставить ng-animate работать правильно. Классы, такие как "ng-enter" и "ng-leave", не добавляются к различным элементам.

Я сравнивал все виды рабочих скриптов с моими, но просто не могу понять, что я делаю неправильно.

Мой заголовок:

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

Мой HTML:

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

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

Мои контроллеры .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 первой/главной страницы:

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

Если я прав, div с классом "hotspot" должен получить классы "ng-enter" и "ng-leave"... но почему-то они этого не делают.

Может ли кто-нибудь помочь мне с этим? Что я делаю не так? Большое спасибо!

Ответ 1

Пара вещей, которые вы должны оплатить:

Вы не указали, какую версию на angular вы используете. Из версии 1.2 анимация работает по-разному. Есть очень хорошая статья: Remastered Animation
Кроме того, философия ng-animate - это время добавления и удаления CSS-классов, поэтому фактическая анимация должна определяться CSS (которую вы не предоставили, поэтому трудно понять, что не так).
Кроме того, "фактическая" анимация - это где ng-leave.ng-leave-active и ng-enter.ng-enter-active. Подробнее об этом можно прочитать в статье.
Вот очень простой пример, который должен дать вам начало: Пример простого плункера

Ответ 2

если вы используете Angular из версии 1.2, вы должны объявить анимацию класса CSS для элемента, который вы хотите оживить, и вставьте 'ngAnimate' в свой модуль.

см. этот код > http://codepen.io/rl/pen/pvbMyp

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