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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

bug(mat-expansion-panel): Expansion panel content flickers during ng-animation for lazy-loaded custom height nested expansion panels #22715

Closed
LukasKlement opened this issue May 18, 2021 · 2 comments · Fixed by #30119
Closed

bug(mat-expansion-panel): Expansion panel content flickers during ng-animation for lazy-loaded custom height nested expansion panels #22715

LukasKlement opened this issue May 18, 2021 · 2 comments · Fixed by #30119
Assignees
@crisbeto
Labels
area: material/expansion help wanted The team would appreciate a PR from the community to address this issue P4 A relatively minor issue that is not relevant to core functions

Comments

@LukasKlement
Copy link

LukasKlement commented May 18, 2021 •
edited
Loading

Nested lazy-loaded expansion panels with a custom collapsed height lead to a flickering animation when uncollapsing the parent expansion panel for the first time.

Reproduction

Stackblitz: https://stackblitz.com/edit/nested-lazyloaded-customheight-expansion-panel?file=src/app/example-component.html

Steps to reproduce:

  1. Nest two expansion panels with a custom collapsed height inside a lazy-loaded expansion panel
  2. Toggle the parent expansion panel

Expected Behavior

The expansion panel opens smoothly.

Actual Behavior

The height of the expansion panel flickers during the animation when opening the parent expansion panel for the first time.

Environment

  • Angular: 11.2.11, 12.0.0
  • CDK/Material: 11.2.11, 12.0.0
  • Browser(s): any
@LukasKlement LukasKlement added the needs triage This issue needs to be triaged by the team label May 18, 2021
@jelbourn jelbourn added area: material/expansion help wanted The team would appreciate a PR from the community to address this issue P4 A relatively minor issue that is not relevant to core functions and removed needs triage This issue needs to be triaged by the team labels May 19, 2021
@fplusf
Copy link

fplusf commented Jan 12, 2023

Is anyone currently working on this, or can I attempt to fix it?

xAmaris added a commit to xAmaris/components that referenced this issue Mar 11, 2023
@xAmaris
fix(material/expansion): Expansion panel content flickers during anim…
92899e7 
…ation for lazy-loaded custom height nested expansion panels

This fix introduces workaround for a `void => collapsed` animation that is causing improper behaviour for lazy-loaded body.
First, it disables first `void => collapsed` animation after init to disable recalculation which fixes changing heights of inner panels.
Second, it sets `mat-expansion-panel-hidden` class on content init and removes it on creating lazy-loaded body to remove flicker of parent expansion panel

Fixes angular#22715
@xAmaris xAmaris mentioned this issue Mar 11, 2023
Closed
xAmaris added a commit to xAmaris/components that referenced this issue Mar 11, 2023
@xAmaris
fix(material/expansion): Expansion panel content flickers during anim…
7855d97 
…ation for lazy-loaded custom height nested expansion panels

This fix introduces workaround for a `void => collapsed` animation that is causing improper behaviour for lazy-loaded body.
First, it disables first `void => collapsed` animation after init to disable recalculation which fixes changing heights of inner panels.
Second, it sets `mat-expansion-panel-hidden` class on content init and removes it on creating lazy-loaded body to remove flicker of parent expansion panel

Fixes angular#22715
@crisbeto crisbeto self-assigned this Dec 5, 2024
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 5, 2024
@crisbeto
fix(material/expansion): switch away from animations module
bcfd6c3 
Reworks the expansion panel to animate purely with CSS, rather than going through the `@angular/animations` module. This simplifies the setup and allows us to resolve several long-standing bug reports.

Fixes angular#27946.
Fixes angular#22715.
Fixes angular#21434.
Fixes angular#20610.
Fixes angular#20517.
Fixes angular#17177.
Fixes angular#16534.
Fixes angular#16503.
Fixes angular#14952.
Fixes angular#14759.
Fixes angular#14075.
Fixes angular#11765.
@crisbeto crisbeto mentioned this issue Dec 5, 2024
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 5, 2024
@crisbeto
fix(material/expansion): switch away from animations module
b35c757 
Reworks the expansion panel to animate purely with CSS, rather than going through the `@angular/animations` module. This simplifies the setup and allows us to resolve several long-standing bug reports.

Fixes angular#27946.
Fixes angular#22715.
Fixes angular#21434.
Fixes angular#20517.
Fixes angular#17177.
Fixes angular#16534.
Fixes angular#16503.
Fixes angular#14952.
Fixes angular#14759.
Fixes angular#14075.
Fixes angular#11765.
crisbeto added a commit that referenced this issue Dec 5, 2024
@crisbeto
fix(material/expansion): switch away from animations module (#30119)
7b64c45 
Reworks the expansion panel to animate purely with CSS, rather than going through the `@angular/animations` module. This simplifies the setup and allows us to resolve several long-standing bug reports.

Fixes #27946.
Fixes #22715.
Fixes #21434.
Fixes #20517.
Fixes #17177.
Fixes #16534.
Fixes #16503.
Fixes #14952.
Fixes #14759.
Fixes #14075.
Fixes #11765.

(cherry picked from commit aafa151)
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 5, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/expansion help wanted The team would appreciate a PR from the community to address this issue P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
4 participants
@jelbourn @crisbeto @LukasKlement @fplusf