angularjs - 当一个被移除时，如何为剩余的 ng-repeat 元素设置动画？

Question

我有一个使用 ng-repeat 的动态元素列表。当某事发生时，一个元素可能会消失。我已经使用 ng-animate 顺利处理了这些元素的移除动画，但在它们消失后，其余元素只是简单地捕捉到它们的新位置。我怎样才能顺利地制作这个 Action 的动画？

我已经尝试将“全部”转换应用于重复的类并使用 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、ng-leave< 在 CSS 中定义动画，以及 Angular 在添加、删除或移动元素时添加到元素的 ng-move。

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

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