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

Question

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

我在这里设置了一个小提琴,所以你可以看到我的问题: -

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属性.因此,当您在转换的同时应用最大高度时,它将为您添加属性提供动画!这是在"start"类被应用之前,这意味着在开始阶段应该开始之前,设置阶段将不会完成(因为动画需要1秒).因此,当您应用"离开"动画时,将执行以下步骤.

1. 元素开始时没有max-height.
2. 应用"leave-setup"类,为您提供最大高度和过渡.
3. 因为max-height只是"改变"(从不存在到现有)并且你有一个转换,浏览器现在将开始设置max-height的动画,从一些默认的起始值(看似0)到你选择的250px的值,所以元素立即缩小为0并开始动画制作!
4. 现在应用"leave-start"类,但步骤3还没有完成!最大高度仍然是0,或接近,因为它仍然是繁忙的动画的属性的插入,所以动画只是停止并重新变为0,我们从来没有看到任何东西.

但是,如果我们从"设置" - 工序在CSS中移动的过渡属性设置为"开始" - 工序,像上面,步骤3将是瞬间,因为它没有任何过渡.转换首先出现在第4步.所以我们有:

1. 元素开始时没有max-height.
2. 应用"leave-setup"类并为您提供最大高度但不过渡.
3. 我们没有过渡,因此最大高度立即变为250px.
4. 现在应用了"leave-start"类,并且由于第3步完成,这次最大高度现在是250px,我们可以在没有问题的情况下远离它.

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

编辑:

我对此进行了更多的实验,结果证明我的答案对Firefox不起作用(至少在FF Windows上不行).首先,如果你动画一个不存在的属性,FF似乎只是直接失败,所以你需要确保你的元素从一开始就有一个max-height,如:

li {
    max-height: 250px;
}

这个修复留给我,但由于某种原因,根本没有输入动画将在Windows上的Firefox中工作.仍然试图找出那一个.