Angular: Disable animation on initial view / page load

Question

I have an Angular 4 component with a list of items. I followed the Angular documentation (https://angular.io/api/animations/animation) on setting up Enter and Leave animation when item is added or removed. But the same animation is played on all existing items in the list when the view is loaded. Is there a way to turn off animation on the initial view load but re-enable it after view is loaded?

Answer 1

You can define a dedicated animation state for added components.

Then you will have 3 transitions

1. void => * // Initial load - no animations
2. void => added // Animation for added components
3. * => void // Animation for removal of component