css - 链接 ng-repeat 元素转换

Question

我有一个简单的名称列表范围:

$scope.friends = [
    {name:'John'},
    {name:'Jessie'},
    {name:'Johanna'},
    {name:'Joy'},
    {name:'Mary'},
    {name:'Peter'},
    {name:'Sebastian'},
    {name:'Erika'},
    {name:'Patrick'},
    {name:'Samantha'}
  ];

我对这些元素执行简单的 ng-repeat，并显示在我的前端。我想尝试实现的是每个元素/名称都像链条一样一个接一个地过渡。

可以在这里找到我看到的效果的壁橱:http://jsfiddle.net/57uGQ/然而，这使用了我想避免的 jQuery 库。

如果有帮助，我正在使用 ng-animate 库？

参见 plunker:http://plnkr.co/edit/aGwEe2jlGBTvjoSsiK9p?p=preview

Answer 1

您可以结合使用 ng-if、$timeout 和 .ng-enter-stagger css 类来复制效果在 jsfiddle 示例中。

html:

<div ng-controller="repeatController">
  <ul>
    <li class="animate-repeat" ng-repeat="friend in friends" ng-if="!hidden">
      {{friend.name}},
    </li>
  </ul>
</div>

js:

angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope, $timeout) {
  $scope.friends = [
      {name:'John'},
      {name:'Jessie'},
      {name:'Johanna'},
      {name:'Joy'},
      {name:'Mary'},
      {name:'Peter'},
      {name:'Sebastian'},
      {name:'Erika'},
      {name:'Patrick'},
      {name:'Samantha'}
    ];
  $scope.hidden = true;
  $timeout(function(){
    $scope.hidden = false;
  }, 10);   
});

CSS:

.animate-repeat.ng-enter {
  transition: 1s linear all;
  opacity: 0;
}
.animate-repeat.ng-enter-stagger {
  transition-delay: 1.2s;
  transition-duration: 0s;
}
.animate-repeat.ng-enter.ng-enter-active {
  opacity: 1;
}

Plunker