Angularjs 如何在ng repeat中使用ng animate来收缩休假项目？

我正在尝试使用新的ng animate指令，当与ng repeat一起使用时，我正在努力获得所需的效果。我试图让物品在进入时增长，离开时收缩。到目前为止，enter正在工作，但收缩动画失败

我在这里摆好了小提琴，你可以看到我的问题：-

相关的HTML是：-

<ul>
    <li ng-animate="{enter: 'repeat-enter',
                    leave: 'repeat-leave',
                    move: 'repeat-move'}" ng-click="remove($index)" ng-repeat="name in names">{{name}}</li>
</ul>

有人知道我哪里出错了吗

谢谢

瑞安

---

ps刚刚注意到在IE 10中没有动画工作！我现在正在用Chrome进行测试

我不确定为什么要指定

最大高度

。 你可以修改所有的高度规格，它看起来很有效

.repeat-enter-setup, .repeat-leave-setup, .repeat-move-setup {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}

.repeat-enter-setup {
    opacity:0;
}
.repeat-enter-setup.repeat-enter-start {
    opacity:1;
}
.repeat-leave-setup {
    opacity:1;
}
.repeat-leave-setup.repeat-leave-start {
    opacity:0;
}

---

您需要切换css的第一行以影响“开始”类而不是设置类。我知道，这不是他们做例子的方式，但它会起作用。所以，让它：

.repeat-enter-start, .repeat-leave-start, .repeat-move-start {
  -webkit-transition:all linear 1s;
  -moz-transition:all linear 1s;
  -ms-transition:all linear 1s;
  -o-transition:all linear 1s;
  transition:all linear 1s;
}

这很有帮助，因为您正在尝试设置元素通常不具有的属性的动画。元素通常根本不会设置“最大高度”属性。因此，当您在过渡的同时应用“最大高度”时，它将为您添加属性的事实设置动画！这是在应用“开始”类之前，这意味着设置阶段将不会在开始阶段开始之前完成（因为动画需要1秒）。因此，当应用“离开”动画时，将执行以下步骤

元素开始时没有最大高度

应用“离开设置”类，为您提供最大高度和过渡

因为最大高度刚刚“更改”（从不存在到存在），并且您有一个过渡，浏览器现在将开始设置最大高度的动画，从某个默认起始值（看起来是0）到您选择的值250px，因此元素立即收缩到0并开始设置动画

现在应用了“离开开始”类，但步骤3尚未完成！“最大高度”仍然为0或接近，因为它仍在忙于为属性的插入设置动画，所以动画只是停止并再次变为0，而我们从未看到任何东西

但是如果我们将transition属性从“setup”步骤移动到“start”步骤，就像上面的css中那样，步骤3将是即时的，因为它没有转换。过渡首先出现在步骤4。因此，我们：

元素开始时没有最大高度

将应用“离开设置”类，为您提供最大高度，但不提供过渡

我们没有过渡，所以最大高度只是立即更改为250px

现在应用了“离开开始”类，由于第3步已经完成，所以最大高度现在是250px，我们可以在没有问题的情况下设置动画

不透明度没有这个问题，因为您是从默认值1设置动画的，在步骤3中没有动画可以阻挡。此外，enter事件的处理方式似乎有点不同，因为它们更有可能从非默认值设置动画，所以在任何事件上都不会看到这种行为

编辑：

我对此做了更多的实验，结果证明我的答案不适用于Firefox（至少不适用于FF Windows）。首先，如果对不存在的属性设置动画，FF似乎会直接失败，因此需要确保元素从开始处具有最大高度，例如：

li {
    max-height: 250px;
}

---

这个补丁留给我，但由于某些原因，windows上的Firefox中根本无法使用enter动画。仍在努力找出答案。

现在公认的答案有点过时，但在我解决同样的问题时，它仍然非常有用。下面是一个使用最新版本的ng animate和

ng repeat

上的

Limito

过滤器的展开/折叠功能的示例：

HTML:

---

我试图避免在代码中这样做，但我已经在jQuery中添加了一个更新的fiddle来完成所需的动画。谢谢你的回答。“最大高度”尝试使项目作为动画的一部分增长/收缩。移除它意味着不透明度将设置动画，然后您将获得高度跳跃。有关所需的效果，请参见jsfiddle.net/rpk98c/cZy7S/2。我希望我能在CSS中做到这一点。感谢RyanAlso，请注意，由于最大高度远大于元素，淡出和向上滑动的动画将显示为不同步。我们只看到动画的结尾。设置较低的“最大高度”（max height）以解决此问题，或者如果不知道元素的最终高度，请尝试使用“线高度”（line height）设置动画。看起来不太一样，但很接近。回答很好。非常感谢。

li {
    max-height: 250px;
}

<div ng-init="listLimit = 3">
    <div class="expander" ng-repeat="item in list | limitTo: listLimit">
        {{ item }}
    </div>
    <div ng-click="listLimit === 3 ? listLimit = list.length : listLimit = 3">
        <span ng-if="listLimit === 3">more</span>
        <span ng-if="listLimit !== 3">less</span>
    </div>
</div>

.expander {
  max-height: 250px;
  opacity: 1;
  transition: all linear 0.8s;
}

.expander.ng-enter {
  max-height: 0;
  opacity: 0;
}

.expander.ng-enter-active {
  max-height: 250px;
  opacity: 1;
}

.expander.ng-leave {
  max-height: 250px;
  opacity: 1;
}

.expander.ng-leave-active {
  max-height: 0;
  opacity: 0;
}