I’m trying to create a smooth animation when an item is removed or changed it’s location in a flex layout with angular animations. I’ve clean playground.

I have a component that changes size every now and then. When it gets destroyed, I need its current height for the :leave animation. The animation is bound to the component by @HostBinding().

I want to animate a list of elements over several pages. The list is divided into chunks of 4 elements per page. At the start, the first page is displayed, with each element being shown one after the other. After 1 second, these elements should be removed one after the other and the second page should be shown, etc. At the end of the list, the first page should be started again.

I want to animate a list of elements over several pages. The list is divided into chunks of 4 elements per page. At the start, the first page is displayed, with each element being shown one after the other. After 1 second, these elements should be removed one after the other and the second page should be shown, etc. At the end of the list, the first page should be started again.

I’m new to Angular animations and couldn’t figure out why this won’t apply the child elements. Anyone help would be appreciated.

Consider the following animation:

How to, given div in angular animations, make it move right some amount (px) on each click?
This is the demo of what I have in mind:
https://jsfiddle.net/ergsLju1/23/