我在这里设置了一个小提琴,所以你可以看到我的问题： –
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进行测试
.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只是“改变”(从不存在到现有)并且你有一个转换,浏览器现在开始设置max-height的动画,从一些默认的起始值(看似0)到你选择的250px的值,所以元素立即缩小到0并开始动画！
>现在应用了“leave-start”类,但步骤3还没有完成！最大高度仍为0或接近,因为它仍然忙于动画插入属性,因此动画停止并再次变为0,我们从未看到任何内容.
但是如果我们将过渡属性从“setup”-step移动到“start”-step,就像上面的css一样,第3步将是即时的,因为它没有转换.转换首先出现在第4步.所以我们有：
>您的元素在没有最大高度的情况下开始.
>应用“离开设置”类并为您提供最大高度但不过渡.
>我们没有过渡,因此最大高度立即变为250px.
>现在应用了“leave-start”类,并且由于第3步完成,这次最大高度现在是250px,我们可以在没有问题的情况下远离它.
你没有这个不透明度的问题,因为你是从默认值1动画,没有动画可以阻止在步骤3中.似乎输入事件处理有点不同,因为它们更有可能从非默认值设置动画,因此您不会在任何事件上看到此行为.
编辑：
我对此进行了更多的实验,结果证明我的答案对Firefox不起作用(至少不适用于FF Windows).首先,如果您为非现有属性设置动画,FF似乎只是直接失败,因此您需要确保元素从一开始就具有最大高度,例如：
li {
max-height: 250px;
}
这个修复留给我,但由于某种原因,根本没有输入动画将在Windows上的Firefox中工作.还在努力想出那一个.
