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

Question

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

我在这里设置了一个 fiddle ，所以你可以看到我的问题:-

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 刚刚注意到在 IE 10 中没有动画工作!我现在正在 Chrome 中测试

Answer 1

您需要切换 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;
}

这会有所帮助，因为您正在尝试为元素通常不具备的属性设置动画。元素通常根本不会设置 max-height 属性。因此，当您在过渡的同时应用 max-height 时，它会为您添加该属性的事实设置动画!这是在“开始”类甚至应用之前，这意味着在开始阶段应该开始之前，设置阶段将不会完成(因为动画需要 1 秒)。因此，当您应用“离开”动画时，将发生以下步骤。

您的元素开始时没有最大高度。

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

因为 max-height 刚刚“改变”(从不存在到存在)并且您有一个过渡，浏览器现在将开始将 max-height 从某个默认起始值​​(似乎为 0)设置为您选择的 250px 值，所以元素立即缩小到 0 并开始动画!

现在应用了“leave-start”类，但是步骤 3 还没有完成! max-height 仍然是 0 或接近于 0，因为它仍然忙于动画插入属性，所以动画只是停止并再次变为 0，我们什么也没看到。

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

您的元素开始时没有最大高度。

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

我们没有过渡，所以最大高度会立即更改为 250 像素。

现在应用了“离开开始”类，并且由于这次完成了第 3 步，因此最大高度现在是 250 像素，我们可以毫无问题地进行动画处理。

你没有不透明度这个问题，因为你是从默认值 1 开始动画的，在第 3 步中没有动画妨碍。似乎输入事件的处理方式有点不同，因为它们更有可能从非默认值设置动画，因此您不会在任何事件中看到这种行为。

编辑:

我对此进行了更多实验，结果发现我的答案不适用于 Firefox(至少不适用于 FF Windows)。首先，如果您为不存在的属性设置动画，FF 似乎会直接失败，因此您需要确保您的元素从一开始就具有最大高度，例如:

li {
    max-height: 250px;
}

这个修复留给我，但由于某种原因，在 Windows 上的 Firefox 中根本没有进入动画。仍在试图弄清楚这一点。