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 addon）

<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来延迟在页面中添加第一个itens。 Here is the Plunker

Answer 2

在角项目的html文件中加入'angular-animate.js'。
在控制器文件中，如控制器代码中所示注入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中为队列元素设置动画

2 个答案: