Angular router animation exposing elements that was hidden by animation

🐞 bug report

Affected Package

The issue is probably caused by package @angular/animations

Is this a regression?

Yes, in Angular 8.x this was ok.

Description

I’m trying to upgrade my Angular project from 8.x to 9. Once I’ve done following the upgrade instructions, I’ve noticed that on one page that contains inner animation on it that supposed to hide certain element, becomes visible during router animation. I synthesized the issue to small project that demonstrate the issue (can be also found in StackBlitz: https://stackblitz.com/edit/angular-jbcamx)

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-jbcamx

🔥 Exception or Error

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.1
Node: 14.0.0
OS: win32 x64

Angular: 9.1.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.1
@angular-devkit/build-angular     0.901.1
@angular-devkit/build-optimizer   0.901.1
@angular-devkit/build-webpack     0.901.1
@angular-devkit/core              9.1.1
@angular-devkit/schematics        9.1.1
@angular/cdk                      9.2.1
@angular/cli                      9.1.1
@ngtools/webpack                  9.1.1
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant?

[ofir-haviv]

Thanks @ismailcherri for looking into it.

1. You are right - after taking more carful look at my repro, I noticed that hidden part appears before at the entrance, while locally it expose itself during the leave. This is interesting, because if I download the stackblitz project as is, and run npm install and ng serve, my issue does reproduced (only locally). Downgrading to Angular 8 fixes the issue without code change.
2. I did some more digging, and found something else that I can’t explain. in my test.component.ts where I defined the inner animation, I have wildcard state transition like * => * (I have only 2 states). If I change the transition to hide <=> show (it should be equivalent as I understand it), the issue that can be seen in stackblitz is solved without adding the height: 0px

[ismailcherri]

Your example doesn’t work as intended or doesn’t demonstrate the bug correctly. Even when router animation is disabled, the issue is still there. The height: 0px takes some milliseconds to be applied. If you add it to the inline style, the issue is gone. Example:

template: `
  <p>outter text!</p>
  <button (click)="OnClick()">Expose</button>
  <div [@scrollAnimation]="AnimationState" style="overflow: hidden; height: 0px">
    <p>Inner Text</p>
  </div>`,