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

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.

希望对您有所帮助。