AngularJS 1.2.14 ng-repeat 项目的动画

Question

我有一个表，我希望行因搜索结果而消失:

<tbody>
    <tr ng-click="open(item._id)" ng-animate="'animate'" ng-repeat="item in itemList | filter:searchText" >
      <td>{{$index + 1}}</td>
      <td>{{item.name}}</td>
      <td>{{item.description}}</td>
      <td>{{item._id}}</td>
    </tr>
</tbody>

我的应用程序引用了 app.js 中的 ngAnimate 模块 - 文件:

var app = angular.module("app", ["ngAnimate", "appController", "appFactory", "appConfig"]);

index.html的来源:

<link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="/css/custom/custom.css" rel="stylesheet">

<script src="/js/libs/bootstrap/bootstrap.js"></script>
<script src="/js/libs/angular/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.14/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.js"></script>
<script src="js/controller/app.js"></script>

因此我使用这个CSS:

.animate-enter, .animate-leave {

transition: 500ms ease-in all;
position: relative;
display: block;
} 

.animate-enter.animate-enter-active, .animate-leave {
left: 0;
}
.animate-leave.animate-leave-active, .animate-enter {
left: 500px;
}

不幸的是，什么也没发生。

Answer 1

将 ng-animate="'animate'" 替换为 class="animate"那么CSS应该是:

.animate.ng-enter, .animate.ng-leave {
  transition: 500ms ease-in all;
  position: relative;
  display: block;
} 

.animate.ng-enter.ng-enter-active, .animate.ng-leave {
  left: 0;
}
.animate.ng-leave.ng-leave-active, .animate.ng-enter {
  left: 500px;
}

从版本 1.2 开始，ng-animate 属性被替换为类 Docs for ngAnimate