The problem us basically explained in the title. I have router-outlet and components with :enter and :leave animations. During navigating from one to another both components are in outlet at the same time(leaving and entering), causing ugly resize of container.
Is there a solution to wait for one component to finish :leave animation before another starts to enter?
Stackblitz example: https://stackblitz.com/edit/stackblitz-starters-xa8lu9dr?file=src%2Fmain.ts
Since you are using v17 of Angular, it is highly recommended you go for view transitions API.
Angular v17’s View Transitions: Navigate in Elegance
The reason for the overlay, is because, when animating, you should position the elements either as absolute or fixed so that the stacking does not happen.
transition('* <=> *', [ style({ position: 'relative' }), query( ':enter, :leave', [ style({ position: 'absolute', top: 0, left: 0, width: '100%', }), ], { optional: true } ), ]), const fadeInOutAnimation = trigger('fadeInOut', [ transition('* <=> *', [ style({ position: 'relative' }), query( ':enter, :leave', [ style({ position: 'absolute', top: 0, left: 0, width: '100%', }), ], { optional: true } ), ]), transition(':enter', [ style({ opacity: 0, height: 0 }), animate( '0.4s cubic-bezier(0.05, 0.7, 0.1, 1.0)', style({ opacity: 1, height: 'auto' }) ), ]), transition(':leave', [ style({ opacity: 1, height: 'auto' }), animate( '0.35s cubic-bezier(0.3, 0.0, 0.8, 0.15)', style({ opacity: 0, height: 0 }) ), ]), ]);