Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inline CSS from Angular Animations lost when reattaching Route Snapshot #36401

Open
IanNMarshall opened this issue Apr 2, 2020 · 2 comments
Open
Labels
area: animations area: router freq2: medium P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent state: needs more investigation type: bug/fix
Milestone

Comments

@IanNMarshall
Copy link

IanNMarshall commented Apr 2, 2020

馃悶 bug report

Affected Package

@angular/animations
@angular/router

Is this a regression?

Behavior started with angular 9

Description

When using a Custom Route Reuse strategy the css that had been applied via an angular animation disappears leaving the element in neither "animation state"

馃敩 Minimal Reproduction

https://github.com/IanNMarshall/angular9-animations-example

Steps to reproduce

$ ng serve
  1. Click the "animation" button to be routed to /animation
  2. Toggle the animation any number of times or none at all
  3. Click home to navigate away
  4. Click "animation" again and the animation css has been removed, it is in neither the open or closed state.
  5. Additionally if you now toggle the animation it works for all future routing

Working example

Same src as above example but pre angular 9, works as expected, keeps animation state.
https://github.com/IanNMarshall/angular8-animation-example

馃實 Your Environment

Angular CLI: 9.1.0
Node: 12.13.0
OS: darwin x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.0
@angular-devkit/core         9.1.0
@angular-devkit/schematics   9.1.0
@schematics/angular          9.1.0
@schematics/update           0.901.0
rxjs                         6.5.4

Anything else relevant?
Could not mimic this behavior with [style] binding or setAttribute("style") seems to only happen with animations.

@matsko
Copy link
Contributor

matsko commented May 27, 2020

Hello @IanNMarshall. I can definitely see the issue here, but it's not yet clear whether or not this is caused directly by animations or from the router/core part of the framework. In other words, we need to investigate more. I've added the labels here so that we can track this issue and once we have more time fully get to the bottom of it. Thank you for reporting this.

@jelbourn jelbourn added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed severity3: broken labels Oct 1, 2020
@Da13Harris
Copy link
Contributor

Da13Harris commented Oct 21, 2020

Seems like #26133 and #35270 might be related to this. Ivy + animations + custom RouteReuseStrategy = broken.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: animations area: router freq2: medium P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent state: needs more investigation type: bug/fix
Projects
None yet
Development

No branches or pull requests

7 participants