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

前端之家收集整理的这篇文章主要介绍了angularjs – Ng-animate不添加ng-enter和ng-leave类前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我第一个使用Angular的项目,我有一些烦恼与ng动画。我做了几个教程,在教程中,我一切正常工作。现在我正在使用Angular作为一个项目,我只是不能得到ng动画正常工作。诸如“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',$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>

如果我是正确的,课堂上的“热点”应该会收到“进入”和“离开”课程,但不知何故,他们不会。

有人可以帮助我吗?我究竟做错了什么?
非常感谢!!

你应该支付的几件事情结帐:

>你没有提到你使用哪个版本的角度。从1.2版本的动画作品不同。有一个非常好的文章Remastered Animation
此外,ng动画哲学是CSS类的添加删除的定时,所以实际的动画应该由CSS定义(你没有提供,所以很难弄清楚是什么问题)。
>此外,“实际”动画是ng-leave.ng-leave-active和ng-enter.ng-enter-active的地方。您可以在文章中阅读更多内容
>这是一个非常简单的例子,应该给你一个开始:Simple Plunker Example

猜你在找的Angularjs相关文章