🐞 bug report

Affected Package

This seems to be a problem in @angular/animations.

Is this a regression?

No, it also does not work in previous versions AFAICT (tested 7, 10 and 11).

Description

I have an issue with my angular router animation(s). I have various animations on the page. A quick outline:

1. There is a main content router-outlet. It uses a simple fade-in/fade-out animation - works great
2. There is a secondary "panel" router-outlet, which shows additional data. It uses the very same router animation, which also works great.
3. The "panel" on the side also supports a "maximized" mode. This makes the panel wider. In this case the width of the panel is animated (which is an indirect parent div of the actual router-outlet). If this happens, the router animation of the panel does not play properly. While animating the width of the panel, one can see the content of both components, the leaving and the entering one on screen for a brief duration.

I already tried to add group with animateChild() blocks to my animations to no avail...

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-gci3kd?file=src/app/app.component.ts

Switch between 'One' and 'Two' - this will trigger two animations through different mechanisms - the container width resizing (the one with the red border) and the router animation. The router animation is not played correctly, it will have both components visible without any animation styles applied to them.

Switch between 'Two' and 'Three' - this will trigger only the router animation as the animation state of the container stays the same - in this case the animation is rendered correctly.

🔥 Exception or Error

No visible error, just does not work.

🌍 Your Environment

Angular Version:
7 - 11, stackblitz uses the current stackblitz template using 11.0.8

Anything else relevant?
It happens with both chrome and firefox