how to animate list of mat cards (each mat-card is an component) up or down in angular?

Question

I have list of html ids for for mat-cards that needs to be animated up or down as an whole.

I see angular group function, not sure how to use it in for loop because all these cards need to move up or down parallelly.

Any reference will be great, thanks.

Answer 1

Try just adding animation on single mat card first, try using ngdeep - angular way(can search if you have doubt how to use that), if css is not applying on mat elements.

You can add a 3rd party css library:

https://css-tricks.com/css-animation-libraries/

i will prefer https://animate.style/ animate one.

this will make your life easier if your site has lot of animation requirements