角度ng-animate导致模型上的奇怪动画更改

angular ng-animate causing weird animation on model changed

本文关键字：动画 ng-animate 模型角度更新时间：2023-09-26

我目前正在使用Angular 1.2 RC3，我为我的ng-repeat项目使用了过渡。但是，我发现每当我更改ng-repeat的模型时，过渡就会变得混乱。您将看到整个项目列表弹出，然后消失。我想要的只是简单地淡出整个列表，淡入新项目列表。我怎样才能达到这种效果？

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

谢谢。

问题似乎是，当您切换列表内容时，新元素会立即插入顶部并占用一些空间，尽管它们还不可见。一个改进可能是对高度进行动画处理，并查看您的 plunker 的这种修改作为示例。

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