angularjs - Ng-animate不添加ng-enter和ng-leave类

Question

这是我与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>

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

我的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：

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

如果我是正确的，则具有“ hotspot”类的div应该会收到“ ng-enter”和“ ng-leave”类……但他们却没有。

有人可以帮我这个忙吗？我究竟做错了什么？
非常感谢！！

Answer 1

您应该支付结帐的几件事：


您没有提到您使用的是哪个版本的angular。从1.2版开始，动画的工作方式有所不同。有一篇很好的文章问候：Remastered Animation
另外，ng-animate的原理是定时添加和删除CSS类，因此实际的动画应该由CSS定义（您没有提供，所以很难弄清楚出什么问题了）。
此外，“实际”动画是ng-leave.ng-leave-active和ng-enter.ng-enter-active发生的位置。您可以在文章中阅读更多内容。
这是一个非常简单的示例，应该可以帮助您入门：Simple Plunker Example