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引用了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;
}

ng-animate属性从1.2版本开始被class取代ngAnimate