似乎無法讓ngAnimate進行ng-repeat

Question

我有以下HTML片段：

<div ng-app ng-controller="mainCtrl">
  <div ng-repeat="item in items" ng-mouseenter="item.showRemove = true" ng-mouseleave="item.showRemove = false" class="repeated-item">
    <span class="remove-item glyphicon glyphicon-remove" ng-show="item.showRemove" ng-click="removeItem(item)"></span>
    <div class="h3">{{item.title}}</div>
    <p>{{item.description}}</p>
  </div>
</div>

以下CSS應用於標記：

body { padding: 15px; }

.repeated-item {
  padding: 10px;
  margin-bottom: 15px;
  border-left: solid 1px #ccc;
  border-top: solid 1px #ccc;
  border-radius: 10px;
  background-color: #eee;
  position: relative;
}

.repeated-item:hover { background-color: #ddd; }

.remove-item {
  float: right;
  cursor: pointer;
  color: #b00;
  font-size: x-large;
}

.h3 {
  border-bottom: dotted 1px #bbb;
}

.repeated-item.ng-leave {
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;
  opacity:1;
}

.repeated-item.ng-leave.ng-leave-active {
  opacity:0;
}

最后，我有以下javascript：

function mainCtrl($scope) {
    $scope.items = [
      {
        title: 'Star Trek: The Original Series',
        description: 'brevity brevity...'
      },
      {
        title: 'Star Trek: The Next Generation',
        description: "brevity brevity..."
      },
      {
        title: 'Star Trek: Deep Space Nine',
        description: "brevity brevity..."
      },
      {
        title: 'Star Trek: Voyager',
        description: "brevity brevity..."
      },
      {
        title: 'Star Trek: Enterprise',
        description: "brevity brevity..."
      }
    ];
    $scope.removeItem = function (itemToRemove) {
      var index = $scope.items.indexOf(itemToRemove);
      if (index !== -1) {
        $scope.items.splice(index, 1);
      }
    };
}

我創建這個小演示只是為了學習如何使用ngAnimate。 但是，網絡上的文檔似乎有點不足，我似乎無法弄清楚自己在做什么錯。 我正在使用此頁面將淡出動畫應用於ng-repeat中的項目。 我似乎無濟於事。 我已經給重復的項目提供了它自己的類，並且應用了動畫規則（是的，我確實包含了ngAnimate文件）。 除動畫外，其他所有功能均有效。

我究竟做錯了什么？

Codepen.io上的工作演示

Answer 1

將<div ng-app ng-controller="mainCtrl">更改為<div ng-app="ngAnimate" ng-controller="mainCtrl">

注意ngAnimate 。