Question

我是angularjs的新手，并希望对每个ng-repeat元素应用500毫秒的延迟。下面的plunker中的代码是我正在寻找的确切内容，但它不适用于最新版本的角度js（1.4.8）。以下网站还介绍了如何应用延迟，但它有点令人困惑，它说的是关于add-active和-remove。

这里是html，css和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

Answer 1

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

Answer 2

以下是您的代码https://plnkr.co/edit/LR9yadLEQySdQjTr6jg5?p=preview

的工作演示

我改变的事情：

包含ngAnimate模块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'}"
将.insert-enter重命名为.ng-enter
将.insert-enter.insert-enter-active重命名为.ng-enter.ng-enter-active

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

2 个答案: