在 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 中，我有以下内容（使用角度指令插件）

<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 文档：

... 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

Answer 2

将 'angular-animate.js' 包含在 angular 项目的 html 文件中。
在您的控制器文件中，如下所示在控制器代码中注入 ngAnimate 依赖项。
最后，将以下样式添加到您的 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>

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

animate a queue elements in ng-repeat

javascript

animation

angularjs