CODEWITHSUNDEEP
cssangularjsanimationangularjs-ng-repeat
user3810167
user3810167

Reputation:

Animation delay ng-repeat

I have this code with ng-repeat and delay in 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>

I need that the delay value in every item of ng-repeat , increase. For example:

First item: animation: moveUp 0.50s ease forwards Second item: animation: moveUp 0.60s ease forwards Third item: animation: moveUp 0.70s ease forwards

How can I make that ?

Thanks

Upvotes: 0

Views: 938

Answers (2)

cnorthfield
cnorthfield

Reputation: 3501

You could use the ngStyle directive with $index.

See this working example with keyframes:

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>

The result will give you 0.5s, 1s, 1.5s and so on...

Upvotes: 3

PJDev
PJDev

Reputation: 983

You can substitute 0.50s in style attribute with angular expression. A simple solution would be:

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

$index contains an index of current ng-repeat element so if you multiply it by 0.1 and add to base 0.5, each item will have delay 0.1s longer than its predecessor.

Upvotes: 0

Related Questions