列表项动画在同时添加/删除元素时不起作用

Question

我要显示消息列表。 但是，如果有很多消息，则消息溢出了屏幕。

因此，我想删除放置它的第一个元素以及列表的末尾。 但是我想通过动画将其删除，并同时添加动画。

但是它没有按我预期的那样工作。当我仅删除该元素时，它就起作用了。如果我仅添加一个元素，它也可以正常工作。 但是如果我同时做这两个，就不会有动画

请参阅：https://stackblitz.com/edit/angular-animation-question

有人可以解释我为什么吗？我想我第一次尝试动画时会误会一些东西。

Answer 1

设法通过以下方式做到这一点：

hello.component.html

<div [@listStagger]='items[items.length - 1]'>

hello.component.ts

   var tempMessage = this.messages.shift();
   this.messages.push({ ...tempMessage });

在stackblitz上。

希望有帮助。