ng-repeat要素の表示に遅延を適用する方法

Question

私はangularjsを初めて使用し、ng-repeat要素ごとに500msの遅延を適用したいと思っています。以下の点線のコードは、私が探している正確なものですが、最近のバージョンのangle js（1.4.8）では動作しません。次のWebサイトでは遅延を適用する方法についても説明しますが、add-activeと-removeについては少し混乱します。ここで

は、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

Answer 1

はあなたのコードの作業のデモだあなたは、角のモジュールでngAnimate依存性を含める必要があると思うし、またあなたのindex.htmlファイルにngAnimateライブラリが含まれhttps://plnkr.co/edit/LR9yadLEQySdQjTr6jg5?p=preview

私が変更したこと：

• に.insert-enterを改称10
• var m = angular.module('App', ['ngAnimate']);
• は、あなたのHTMLコードにボタンを追加しました<button ng-click="addItems()">Add Items</button>
• は、あなたのHTMLの角アニメーションライブラリを含まhttps://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-animate.js
• がng-animate="{enter:'insert-enter'}"
• を削除ngAnimateモジュールを含まは.ng-enter.ng-enter-active
に .insert-enter.insert-enter-activeを改名します

Answer 2

は、私がここで