CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
deep dalvi
deep dalvi

Reputation: 155

how to apply delay in displaying ng-repeat elements

I'm new to angularjs and want to apply a delay of 500ms to every ng-repeat element.The code in the plunker below is the exact thing i am looking for but it does not work with latest version of angular js (1.4.8).The following website also describes how to apply delay but it's a bit confusing which says about add-active and -remove.

here is the html,css and angular code

<script>
  var m = angular.module('App', []);

  m.controller('ExampleCtrl', function($scope) {
      $scope.items = [];

        $scope.addItems = function() {
          $scope.items = [
          {name: "Apple"},
          {name: "Orange"},
          {name: "Banana"},
          {name: "Lemon"},
          {name: "Lime"},
          {name: "Melon"},
          {name: "Tangerine"}
          ];
        }
  });

</script>


    ul {
      list-style-type: none;
      position:relative;
    }

    li {
      background-color:#e3e3e3;
      color: #666;
      font-family:Arial;
      padding:1em;
      margin:0 5px 5px 5px;
      text-align: center;
      text-transform: uppercase;
    }

    .insert-enter {
      -webkit-transform:scale(0);
      -webkit-transition-property: all;
      -webkit-transition-timing-function: ease-out-cubic;
      -webkit-transition-duration: 400ms;
    }
    .insert-enter.insert-enter-active {
      -webkit-transform:scale(1);
    }

</style>


    <ul>
      <li ng-repeat="item in items" 
          ng-animate="{enter:'insert-enter'}"
          style="-webkit-transition-delay:{{$index * 500}}ms"
      > 
            {{item.name}}
      </li> 
    </ul>

Punker Example

website about ng-repeat classes

Upvotes: 0

Views: 1192

Answers (2)

linktoahref
linktoahref

Reputation: 7972

Here's a working demo of your code https://plnkr.co/edit/LR9yadLEQySdQjTr6jg5?p=preview

Things I've changed:

  • Included the ngAnimate module var m = angular.module('App', ['ngAnimate']);
  • Added a button in your HTML code <button ng-click="addItems()">Add Items</button>
  • Included the angular animate library in your HTML https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-animate.js
  • Removed ng-animate="{enter:'insert-enter'}"
  • Renamed .insert-enter to .ng-enter
  • Renamed .insert-enter.insert-enter-active to .ng-enter.ng-enter-active

Upvotes: 1

nishant agrawal
nishant agrawal

Reputation: 471

I think you need to include ngAnimate dependency in your angular module, and also include ngAnimate library in your index.html file

Upvotes: 2

Related Questions