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

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

AngularJS 1.2.14 ng-repeat项目的动画

1 个答案: