javascript - 在 ng-repeat 中为队列元素设置动画

Question

所以我有一个这样的 Controller :

var control = angular.module('controllers', []);
control.controller('aboutme', ['$scope',
  function($scope) {
    $scope.tabs = [{
      "title": "interests",
      "list": ["cats", "kittens"]
    }, {
      "title": "hobbies",
      "list": ["petting kittens", "playing with kittens", "writing bad stack overflow questions"]
    }]
  }
]);

然后在我的 html 中，我有以下内容(使用 angular-directives 插件)

<div bs-tabs>
  <div ng-repeat="tab in tabs" title="{{ tab.title }}" bs-pane>
    <ul>
      <li ng-repeat="i in tab.list">{{ i }}</li>
    </ul>
  </div>
</div>

这将有效地使选项卡和列表出现在页面上。然而，我想要做的是让每个动画一个接一个地。即，当一个动画完成时，为下一个动画。

这将如何以 Angular 完成？

Answer 1

首先。 Angular 在引导页面时禁用动画。

来自 Angular 文档:

... When an application is bootstrapped Angular will disable animations from running to avoid a frenzy of animations from being triggered as soon as the browser has rendered the screen. For this to work, Angular will wait for two digest cycles until enabling animations. From there on, any animation-triggering layout changes in the application will trigger animations as normal.

因此动画仅适用于添加到列表中的新元素:

1 - 导入 Angular 动画库:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>

2 - 启用 Angular 动画模块

  var control = angular.module('controllers', ['ngAnimate']);

3 - 使用 css 进行转换

  /*
  Enables the transition
  */
.animation-repeat {
    -webkit-transition:5s linear all;
    -moz-transition:5s linear all;
    -o-transition:5s linear all;
    transition:5s linear all;
}

  /*
  Class added when a new element is added to ng-repeat
  */
 .ng-enter {
   opacity: 0;
 }

/*
  The ng-enter-active and ng-move-active
  are where the transition destination properties
  are set so that the animation knows what to
  animate.
*/
.animation-repeat.ng-enter.ng-enter-active,
.animation-repeat.ng-move.ng-move-active {
  opacity:1;
}

但正如我所说，它只适用于在 ng-repeat 中添加的新项目。您可以使用 $timeout 来延迟在页面中添加第一个元素。 Here is the Plunker