CODEWITHSUNDEEP
angularangular-animations
Gildas Cuisinier
Gildas Cuisinier

Reputation: 1

List items animation not working when add/remove element in the same time

I want to display a list of message. But if there is a lot of message, the message are overflowing out of the screen.

So, I wanted to remove the first element to put it and the end of the list. But I wanted to remove it with an animation, and add it with an animation too.

But it's not working as I expected. When I only remove the element, it's working. If I only add an element, it's working too. But if I do both as the same time, there is no animation

See : https://stackblitz.com/edit/angular-animation-question

Does somebody can explain me why ? I suppose that I've missunderstand something as it my first try with Animation.

Upvotes: 0

Views: 436

Answers (1)

Amir Arbabian
Amir Arbabian

Reputation: 3699

Managed to do that in next way:

hello.component.html

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

hello.component.ts

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

on stackblitz.

Hope that helps.

Upvotes: 1

Related Questions