Question

我正在尝试使用新的ng-animate指令，并且在与ng-repeat一起使用时很难获得所需的效果。我试图让物品在进入时生长，并在离开时收缩。到目前为止，输入正在运行，但缩小动画失败了。

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

相关的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属性。因此，当您在转换的同时应用最大高度时，它将为您添加属性的事实设置动画！这是在“start”类被应用之前，这意味着在开始阶段应该开始之前，设置阶段将不会完成（因为动画需要1秒）。因此，当您应用“离开”动画时，将执行以下步骤。

你的元素在没有max-height的情况下开始。
应用“leave-setup”类，为您提供最大高度和过渡。
因为max-height只是“改变”（从不存在到现有）并且你有一个转换，浏览器现在将开始设置max-height的动画，从一些默认的起始值（看似0）到你选择的值250px，因此元素会立即缩小为0并开始设置动画！
现在应用了“leave-start”类，但步骤3还没有完成！最大高度仍为0或接近，因为它仍然忙于动画插入属性，因此动画停止并再次变为0，我们从未看到任何内容。

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

你的元素在没有max-height的情况下开始。
应用“leave-setup”类并为您提供max-height 但不是过渡。
我们没有过渡，因此最大高度立即变为250px。
现在应用了“leave-start”类，自从第3步完成后，这个时间最大高度现在是250px，我们可以在没有问题的情况下远离它进行动画处理。

你没有这个不透明度的问题，因为你是从默认值1动画，没有动画可以阻止在步骤3中。看起来输入事件的处理有点不同，因为它们是更有可能从非默认值设置动画，因此您不会在任何事件中看到此行为。

编辑：

我对此进行了更多实验，结果证明我的答案对Firefox不起作用（至少在FF Windows上不起作用）。首先，如果为非现有属性设置动画，FF似乎只是直接失败，因此您需要确保元素从一开始就具有最大高度，例如：

li {
    max-height: 250px;
}

这个修复留给我，但由于某种原因，根本没有输入动画将在Windows上的Firefox中工作。还在努力想出那一个。

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和limitTo上ng-repeat过滤器的展开/折叠功能示例：

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

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

3 个答案: