Skip to content

fix(material/expansion): Expansion panel content flickers during animation for lazy-loaded custom height nested expansion panels - #26772

Closed
xAmaris wants to merge 1 commit into
angular:mainfrom
xAmaris:expansion-panel-flickering
Closed

fix(material/expansion): Expansion panel content flickers during animation for lazy-loaded custom height nested expansion panels#26772
xAmaris wants to merge 1 commit into
angular:mainfrom
xAmaris:expansion-panel-flickering

Conversation

@xAmaris

Copy link
Copy Markdown

This fix introduces workaround for a void => collapsed animation that is causing improper behaviour for lazy-loaded body.

  1. it disables first void => collapsed animation after init to disable recalculation which fixes changing heights of inner panels.
  2. 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

BEFORE

chrome-capture-2023-2-11

AFTER

chrome-capture-2023-2-11

Fixes#22715

…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
Fixesangular#22715
@xAmaris
xAmarisforce-pushed the expansion-panel-flickering branch from 92899e7 to 7855d97CompareMarch 11, 2023 14:53
@crisbeto

Copy link
Copy Markdown
Member

Closing in favor of #30119.

@crisbetocrisbeto closed this Dec 5, 2024
@angular-automatic-lock-bot

Copy link
Copy Markdown

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-botangular-automatic-lock-botBot locked and limited conversation to collaborators Jan 5, 2025
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants

@xAmaris@crisbeto