Question

我的代码中包含ng-repeat和css中的延迟：

<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轻松前进第二项：动画：moveUp 0.60s轻松前进第三项：动画：moveUp 0.70s轻松前进

我该怎么做？

由于

Answer 1

您可以将ngStyle指令与xFrom - (xFrom - xTo)*motion(t)一起使用。

使用关键帧查看此工作示例：

$index

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

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

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

Answer 2

您可以使用角度表达式替换0.50s属性中的style。一个简单的解决方案是：

<div class="card moveUp" ng-repeat="x in optionsCards" style="animation: moveUp {{ (0.5 + 0.1 * $index) + 's' }} ease forwards;">

$index包含当前ng-repeat元素的索引，因此如果您将其乘以0.1并添加到基础0.5，则每个项目的延迟时间比其{0.1}长0.1秒前身。

动画延迟ng-repeat

2 个答案: