Style binding + style animation + non-reused route + emulated encapsulation breaks route transition animation #46360
Description
Which @angular/* package(s) are the source of the bug?
animations
Is this a regression?
No
Description
Prerequisites
A container component is displaying a child component in a router outlet. The same child component class is used to display multiple pages of content, so to display a page slide as a route transition animation, route reuse is disabled. The content of the child component can be mouse-dragged (which sets its position with a style binding) and animates back to an initial position on doubleclick.
Bug
During the route transition animation, style bindings for the :leave-ing component are unexpectedly deactivated, resulting in an undesired jump in content position.
Workaround
Switching the child component view encapsulation to shadow dom works around the bug.
Please provide a link to a minimal reproduction of the bug
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 14.0.1
Node: 14.18.2
Package Manager: npm 8.5.1
OS: darwin x64
Angular: 14.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1400.1
@angular-devkit/build-angular 14.0.1
@angular-devkit/core 14.0.1
@angular-devkit/schematics 14.0.1
@schematics/angular 14.0.1
rxjs 6.6.7
typescript 4.6.4
Anything else?
No response