移除一个剩余的ng-repeat物品时，我该如何为其动画设置动画？

Question

我有一个使用ng-repeat的动态项目列表。发生某些事情时，某项可能会消失。我已经使用ng-
animate平滑地处理了这些项目的移除动画，但是当它们消失后，其余的项目就简单地捕捉到了它们的新位置。我如何才能使该运动顺利进行动画处理？

我尝试对重复的类应用“全部”过渡，并使用ng-move却没有成功。

Answer 1

您可以通过设置max-height属性动画来实现。查看此示例：

http://jsfiddle.net/k4sR3/8/

您需要为选择一个足够高的值max- height（在我的示例中，我使用90px）。最初添加项目时，您希望它以0高度开始（我也left希望将项目从左侧滑入opacity，但如果它们不符合以下条件，则可以将其删除：你在做）：

.repeated-item.ng-enter {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    max-height: 0;
    opacity: 0;
    left: -50px;
}

然后，在ng-enter-active规则中为这些属性设置最终值：

.repeated-item.ng-enter.ng-enter-active {
    max-height: 90px;
    opacity: 1;
    left: 0;
}

删除项目有些棘手，因为您将需要使用基于关键帧的动画。再次，您希望设置动画max- height，但是这次您要从90px开始并将其减小到0。随着动画的运行，该项目将缩小，而以下所有项目将平滑向上滑动。

首先，定义将要使用的动画：

@keyframes my_animation {
  from {
    max-height: 90px;
    opacity: 1;
    left: 0;
  }
  to {
    max-height: 0;
    opacity: 0;
    left: -50px;
  }
}

（为简便起见，我在这里省略了供应商特定的定义，@-webkit-keyframes，@-moz- keyframes等-看看上面的全样本的jsfiddle。）

然后，声明您将使用此动画，ng-leave如下所示：

.repeated-item.ng-leave {
  -webkit-animation:0.5s my_animation;
  -moz-animation:0.5s my_animation;
  -o-animation:0.5s my_animation;
  animation:0.5s my_animation;
}

基本

如果任何人都在努力弄清楚如何使AngularJS动画完全正常工作，这是一个简短的指南。

首先，使动画支持，你将需要包括一个附加文件angular-animate.js， 之后 您加载angular.js。例如：

<script type="text/javascript" src="angular-1.2/angular.js"></script>
<script type="text/javascript" src="angular-1.2/angular-animate.js"></script>

接下来，您需要ngAnimate通过将其添加到模块的依赖项列表中进行加载（在第二个参数中）：

var myApp = angular.module('myApp', ['ngAnimate']);

然后，为您的ng-repeat项目分配一个类。您将使用此类的名称来分配动画。在我的示例中，我用作repeated-item名称：

<li ng-repeat="item in items" class="repeated-item">

然后，使用repeated-item类以及特殊类ng-enter，在CSS中定义动画ng-leave，并ng- move在添加，删除或移动项目时将Angular添加到项目中。

AngularJS动画的官方文档在这里：

http://docs.angularjs.org/guide/animations