如何应用延迟显示ng-repeat元素

我是angularjs的新手，想要对每个ng-repeat元素应用500ms的延迟。下面的plunker中的代码是我正在寻找的确切的东西，但它不适用于最新版本的角色js（1.4.8）。以下网站还介绍了如何应用延迟，但有点混淆，关于add-active和-remove。如何应用延迟显示ng-repeat元素

这里是HTML，CSS和角代码

<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

来源

2017-02-17 deep dalvi