如何在ng-repeat中使用ng-animate来缩小休假中的项目？

Question

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

我在这里设置了一个小提琴，这样你就可以看到我的问题：

http://jsfiddle.net/rpk98c/6t42M/1/

相关的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>

以及相关的CSS：

.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 {
    max-height: 0;
    opacity:0;
}
.repeat-enter-setup.repeat-enter-start {
    max-height: 250px;
    opacity:1;
}
.repeat-leave-setup {
    opacity:1;
    max-height: 250px;
}
.repeat-leave-setup.repeat-leave-start {
    opacity:0;
    max-height: 0;
}

有人知道我哪里出错了吗？

谢谢,

瑞安

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

Answer 1

您需要切换css的第一行来影响"start“类，而不是setup类。我知道，这不是他们做例子的方式，但它会工作的。所以，让它成为：

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

这很有帮助，因为您正在尝试使元素通常不具有的属性具有动画效果。元素通常根本不会设置max-height属性。因此，当你在过渡的同时应用一个最大高度时，它会使你添加属性的事实变得生动起来！这是在应用" start“类之前，这意味着设置阶段将不会在启动阶段开始之前完成(因为动画需要1秒)。因此，当您应用“离开”动画时，将发生以下步骤。

在没有应用max-height.

• The“leave- transition.

• Because”类的情况下，

1. 你的元素开始了，并给出了最大高度和一个最大高度刚刚“改变”了(从不存在到存在)，你有了一个过渡，浏览器将开始将最大高度从某个默认的起始值(看起来是0)变为你选择的250px的值，所以元素立即缩小到0并开始动画起来！
2. 现在应用了“leave-
3. ”类，但步骤3还没有完成！最大高度仍然是0，或接近0，因为它仍然忙于动画属性的插入，所以动画只是停止并再次转到0，我们永远看不到任何东西。

但是，如果我们将转换属性从"setup"-step移动到"start"-step，就像上面的css一样，步骤3将是即时的，因为它没有转换。转换首先出现在第4步。因此，我们有：

在没有应用max-height.

• The“leave- transition.

• We”类的情况下，

1. 你的元素就开始了，并给出了最大高度，但没有转换，所以最大高度立即被更改为250px。
2. 现在应用了“leave-
3. ”类，自从第三步结束后，最大高度现在是250px，我们可以不出问题地进行动画处理。

不透明度没有这个问题，因为你是从默认值1开始动画的，在步骤3中没有动画。而且enter事件的处理方式似乎也略有不同，因为它们更有可能是从非默认值开始动画的，所以你不会在ever事件上看到这种行为。

编辑：

我对此进行了更多的实验，结果证明我的答案在Firefox上不起作用(至少在FF Windows上不起作用)。首先，如果你动画一个不存在的属性，FF似乎直接失败了，所以你需要确保你的元素从一开始就有一个最大高度，类似于：

li {
    max-height: 250px;
}

这个问题由我来解决，但是由于某种原因，在windows上的火狐浏览器中根本不能输入动画。还在试着弄明白这一点。

Answer 2

我不确定为什么要指定max-height。您可以省略所有的高度指定，它似乎起作用了。

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

Answer 3

公认的答案现在有点过时了，但它仍然很有帮助，因为我解决了同样的问题。下面是一个使用最新版本的ng-animate和ng-repeat上的limitTo过滤器的展开/折叠功能的示例

HTML：

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

CSS：

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