Question

这是我第一个使用Angular的项目，我在ng-animate方面遇到了一些麻烦。我做了几个教程，在教程中我得到了一切正常。现在我正在使用Angular进行项目，而且我无法使动画正常工作。诸如＆＃34; ng-enter＆＃34;之类的课程和＆＃34; ng-leave＆＃34;不会添加到不同的元素。

我已经将各种工作脚本与我的相比较，但却无法找出我做错了什么。

我的标题：

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

第一个/主要pagina的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>

如果我正在使用班级＆＃39; hotspot＆＃39;来更正div。应该收到＆＃39; ng-enter＆＃39;并且＆＃39; ng-leave＆＃39;课程......但不知怎的，他们没有。

有人可以帮我解决这个问题吗？我究竟做错了什么？非常感谢!!

Answer 1

你应该支付结账的一些事情：

您没有提到您使用的角度版本。从版本1.2动画的工作方式不同。有一篇非常好的文章问候：Remastered Animation
此外，ng-animate哲学是定时添加和删除CSS类，因此实际的动画应该由CSS定义（你没有提供，所以很难弄清楚是什么错误。） / LI>
此外，“实际”动画是发生ng-leave.ng-leave-active和ng-enter.ng-enter-active的地方。您可以在文章中阅读更多相关内容。
这是一个非常简单的示例，可以让您先行一步：Simple Plunker Example

Answer 2

如果从版本1.2使用Angular，则必须声明CSS类动画对于您想要动画的元素，并在模块中插入“ngAnimate”。

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

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

2 个答案: