Question

我有一个简单的名单范围：

domain.com/pizza

我对这些项目执行简单的$scope.friends = [ {name:'John'}, {name:'Jessie'}, {name:'Johanna'}, {name:'Joy'}, {name:'Mary'}, {name:'Peter'}, {name:'Sebastian'}, {name:'Erika'}, {name:'Patrick'}, {name:'Samantha'} ];，并显示在我的前端。我想要尝试实现的是每个项目/名称一个接一个地转换，就像链一样。

我可以在这里找到我所看到的效果的壁橱：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

链式重复项目转换

1 个答案: