Javascript 如何在显示ng重复元素时应用延迟

我是angularjs的新手，希望对每个ng repeat元素应用500毫秒的延迟。下面plunker中的代码正是我想要的，但它不适用于angularjs的最新版本（1.4.8）。下面的网站也介绍了如何应用延迟，但对于添加活动和-删除有点混乱

下面是html、css和angular代码

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

var m=角度。模块（'App'，[]）；
m、 控制器（'ExampleCtrl'，函数（$scope）{
$scope.items=[]；
$scope.addItems=函数（）{
$scope.items=[
{名称：“苹果”}，
{名称：“橙色”}，
{名称：“香蕉”}，
{name:“Lemon”}，
{name:“Lime”}，
{名称：“瓜”}，
{名称：“橘子”}
];
}
});

ul{
列表样式类型：无；
位置：相对位置；
}
李{
背景色：#E3；
颜色：#666；
字体系列：Arial；
填充：1em；
保证金：0 5px 5px 5px；
文本对齐：居中；
文本转换：大写；
}
.输入{
-webkit变换：缩放（0）；
-webkit转换属性：全部；
-webkit过渡计时功能：缓解立方；
-webkit转换持续时间：400ms；
}
.insert-enter.insert-enter-active{
-webkit转换：规模（1）；
}

 
{{item.name}

---

我认为您需要在angular模块中包含ngAnimate依赖项，并在index.html文件中包含ngAnimate库

我认为您需要在angular模块中包含ngAnimate依赖项，并在index.html文件中包含ngAnimate库

我改变的事情：

• 包括

  ngAnimate

  模块

  var m=angular.module（'App'，['ngAnimate']）

• 在HTML代码中添加了一个按钮

  additems

• 将角度动画库包含在HTML

  https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-animate.js

• 已删除

  ng animate=“{enter:'insert-enter'}”

• 重命名为

  。将enter

  插入

  。ng enter

• 重命名为

  .insert enter.insert enter active

  至

  .ng enter.ng enter active

---

这是您的代码的工作演示
我改变的事情：
• 包括

  ngAnimate

  模块

  var m=angular.module（'App'，['ngAnimate']）

• 在HTML代码中添加了一个按钮

  additems

• 将角度动画库包含在HTML

  https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-animate.js

• 已删除

  ng animate=“{enter:'insert-enter'}”

• 重命名为

  。将enter

  插入

  。ng enter

• 重命名为

  .insert enter.insert enter active

  至

  .ng enter.ng enter active

---

我在代码中添加了依赖项和库，但仍然不起作用。我在代码中添加了依赖项和库，但仍然不起作用。感谢您的帮助并节省了我的时间：）很高兴我能提供帮助！谢谢你的帮助，节省了我的时间：）很高兴我能帮上忙！

    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>