css - 动画延迟 ng-repeat

Question

我在 css 中使用了 ng-repeat 和延迟代码:

<div class="card moveUp" ng-repeat="x in optionsCards" style="animation: moveUp 0.50s ease forwards;">

    <span class="fec">Updated Aug 29, 2016</span>

    <span class="title">Internet Banner Advertising…</span>

</div>

我需要增加 ng-repeat 每一项的延迟值。例如:

第一项:动画:moveUp 0.50s ease forwards 第二项:动画:moveUp 0.60s ease forwards 第三项:动画:moveUp 0.70s ease forward

我该怎么做？

谢谢

Answer 1

您可以使用 ngStyle带有 $index 的指令。

查看这个带有关键帧的工作示例:

angular.module('MyApp', []);

.moveUp {
  position: relative;
}
@-webkit-keyframes moveUp {
  0% {
    top: 500px;
  }
  100% {
    top: 0px;
  }
}
@keyframes moveUp {
  0% {
    top: 500px;
  }
  100% {
    top: 0px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">

  <div class="card moveUp" ng-repeat="x in [1,2,3,4,5,6] track by $index" ng-style="{'animation': 'moveUp ' + ($index / 2) + 's ease forwards'}">

    <span class="fec">Updated Aug 29, 2016</span>

    <span class="title">Internet Banner Advertising…</span>

  </div>

</div>

结果会给你0.5s、1s、1.5s等等...