I have a component that gets data based on a route parameter and it animates items in a list when the are added or removed.
The animations work as expected when I add/remove an item from the list, but when I change the data by changing route params the list does a crazy hide everything and show everything animation. It makes sense to me why this happens, but how can I get this to only animate when adding or removing from the list? I need a way to disable the animations when the data source changes, but keep the animations active when adding or removing from the list
I know I could do a track $index instead of by unique ID, but then the add/remove animations aren't correct.
Here's a StackBlitz Demo - Switch between Sun and Mon to see the weird animation I would like to prevent
I have a component that gets data based on a route parameter and it animates items in a list when the are added or removed.
The animations work as expected when I add/remove an item from the list, but when I change the data by changing route params the list does a crazy hide everything and show everything animation. It makes sense to me why this happens, but how can I get this to only animate when adding or removing from the list? I need a way to disable the animations when the data source changes, but keep the animations active when adding or removing from the list
I know I could do a
track $indexinstead of by unique ID, but then the add/remove animations aren't correct.Here's a StackBlitz Demo - Switch between
SunandMonto see the weird animation I would like to prevent