`scrollPositionRestoration: 'enabled'` causing issue with class and style bindings

Which @angular/* package(s) are the source of the bug?

router

Is this a regression?

No

Description

I have some styles

.title {
  margin-top: 200px;
  background-color: skyblue;
  color: green;
  transition: all 2000ms;
}

This is the template

<h1 [class.title]="true" [style.margin-left]="'100px'">Home</h1>

The class title and style margin-left should always be in html and there should be no transitions. Which is true when first load or navigate using routerLink. But if I scroll the page and come back to it using browser navigation buttons, I can see transitions. In Firefox I can always see transitions.

https://user-images.githubusercontent.com/34903858/175776581-390302a5-8fb1-4555-811a-656f8e623d36.mp4

https://user-images.githubusercontent.com/34903858/175776590-7fbbcc2e-46c5-4c99-84d1-df6aca001bec.mp4

Please provide a link to a minimal reproduction of the bug

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

Open the preview url in new tab while testing https://angular-ivy-zxjftn.stackblitz.io

1. In home scroll down a little
2. Go to about page and scroll down
3. Navigate using browser navigation buttons

Please provide the exception or error you saw

No exceptions

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.0.2
Node: 16.15.1
Package Manager: npm 8.12.2 
OS: linux x64

Angular: 14.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.2
@angular-devkit/build-angular   14.0.2
@angular-devkit/core            14.0.2
@angular-devkit/schematics      14.0.2
@nguniversal/builders           14.0.1
@nguniversal/express-engine     14.0.1
@schematics/angular             14.0.2
rxjs                            7.5.5
typescript                      4.7.3

Anything else?

No

[atscott]

Yes and no. Your host bindings are dynamic so they rely on a change detection running before they get applied.

You can add attributes to the native element in the constructor to have them there at creation time:

constructor(elementRef: ElementRef) {
    elementRef.nativeElement.classList.add('primary');
    elementRef.nativeElement.style.someProperty('10px');
}

If you have an animation on ‘primary’/‘secondary’, that will still show if it changes to secondary from the binding.

Another option might be to force synchronous change detection immediately on NavigationEnd event (https://stackblitz.com/edit/angular-ivy-tsiy14?file=src%2Fapp%2Fapp.component.ts) rather than waiting for the next animation frame. This will actually also have the side-effect of fixing the scroll restoration for things that aren’t immediately visible during creation mode (i.e., they require change detection to run).

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}