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

Question

所以我有一个像这样的控制器：

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>

这将有效地使选项卡和列表显示在页面上。 但是，我想做的是使每个动画一个接一个地动画。 即，当一个动画结束时，为下一个动画。

如何做到这一点？

Answer 1

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

从Angular Docs：

...当启动应用程序时，Angular将禁用动画运行，以避免在浏览器渲染屏幕后立即触发疯狂的动画。 为此，Angular将等待两个摘要周期，直到启用动画为止。 从那里开始，应用程序中任何触发动画的布局更改都会正常触发动画。

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

1-导入角动画库：

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

2-启用角度动画模块

  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中添加的新itens。 您可以使用$ timeout延迟在页面中添加第一个iten。 这是柱塞

Answer 2

1. 在您的角度项目的html文件中包含“ angular-animate.js”。

2. 在控制器文件中，注入ngAnimate依赖项，如下所示，在控制器代码中。

3. 最后，将以下样式添加到css文件中。

 //controller code goes here angular.module('treeApp.controllers', ['ngAnimate']). controller('treeController', function($scope) { $scope.ideas=[ {name:"ABC", top:"70% !important", left: "4% !important"}, {name:"XYZ", top:"68% !important", left: "3% !important"}, {name:"123", top:"66% !important", left: "2% !important"}]; }); 

  /*css code goes here*/ .animate-repeat.ng-enter { transition: 0.2s linear all; opacity:0; } .animate-repeat.ng-enter-stagger { transition-delay: 0.2s; transition-duration: 0s; } .animate-repeat.ng-enter.ng-enter-active { opacity:1; } 

 <!--html code goes here--> <div id="ideadiv" > <div class="animate-repeat" ng-repeat="idea in ideas"> <div id="overlay" style='top:{{idea.top}};left:{{idea.left}};'> {{idea.name}} </div> </div> </div>