angular / angular/components

mat-expansion-panel keeps contents of collapsed panels in DOM

Offen
#20,680 12 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/expansion G P2
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

I found this while debugging rendering performance in my app. I have a large section that initially renders as a big mat-expansion-panel with all panels collapsed, except one. Here is a screenshot of mat-expansion-panel demo that sxhibits the same behavior:

![4kunmyWShAfRwzA](https://user-images.githubusercontent.com/3027415/94566715-f24f3c00-026a-11eb-9c09-139061cd4181.png)

I believe that the contents of the collapsed sections should be removed from the DOM to not slow down the application by rendering content that isn't currently visible.

If the reason for doing that was animations, then the animations probably need fixing - Angular supports keeping things in DOM while they are animating. Or maybe this was used, but the animation end never gets registered? I'm gussing :) In any case I believe it's a bug.

CC @jelbourn

Possilbly related (?): https://github.com/angular/components/issues/8287

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, das Verhalten in der im Issue gezeigten mat-expansion-panel-Demo nachzustellen, wobei mehrere Panels eingeklappt und eines ausgeklappt ist. Verfolge die Implementierung von mat-expansion-panel und das Verhalten seiner Animation; abgeschlossen ist die Aufgabe, wenn die Inhalte eingeklappter Panels aus dem DOM entfernt werden, ohne die Übergänge zu beeinträchtigen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.