Ng-动画不添加ng-Enter和ng-leave类?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (283)

这是我的第一个项目,与角和我有一些问题的ng动画。现在,我在一个项目中使用了角,我只是不能让Angular动画正常工作。“ng-Enter”和“ng-Lay”等类不会添加到不同的元素中。

header:

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

控制器:

'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>
提问于
用户回答回答于

必须为要动画的元素声明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);
}

用户回答回答于
  1. 你没提到你用的是哪种角度。与1.2版动画不同。有一篇很好的文章提到:重获动画
  2. 另外,ng动画的理念是对CSS类(ES)的添加和删除进行计时,因此实际的动画应该由CSS来定义
  3. 此外,“实际”动画是ng-leave.ng-leave-activeng-enter.ng-enter-active发生。

扫码关注云+社区

领取腾讯云代金券