角度ng-animate导致模型上的怪异动画发生变化

时间:2013-11-09 07:46:16

标签: javascript angularjs ng-animate angularjs-animation

我目前正在使用角度1.2 rc3,我使用转换为我的ng-repeat项目。 然而,我发现每当我改变我的模型进行ng-repeat时,转换就会变得干扰。您将看到整个项目列表弹出然后消失。我想拥有的只是一个简单的淡出整个列表,并淡入新的项目列表。我怎样才能达到这个效果?

以下是重现这一点的掠夺者:http://plnkr.co/edit/lnsxCySFGmUmAnYDqVm3?p=preview 只需添加几行,然后更改模型,您就会看到这种奇怪的行为。

感谢。

1 个答案:

答案 0 :(得分:0)

问题似乎是当您切换列表内容时,新元素会立即插入顶部并占用一些空间,尽管它们尚未显示。一个改进可能是为高度设置动画,也可以参见 this modification of your plunker 作为示例。

另一种解决方案是在完全切换列表内容时延迟输入动画。首先,当前元素消失,然后出现新元素。但是,您可能需要在整个列表中附加一个额外的类才能在CSS中进行区分。并且您必须在切换动画之前和之后手动处理类的添加和删除,因为ng-repeat不区分您的切换操作以及添加或删除单个元素。