angular / angular/components

Consistent animation & UX between ExpansionPanel and Tree?

Offen
#12,126 4 Kommentare 5 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
animation area: material/expansion area: material/tree feature material spec P5
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### Bug, feature request, or proposal:

feature request

#### What is the expected behavior?

ExpansionPanel has pleasant default animations when the panels expand and shrink and the expand_more/chevron_right indicators rotate. I expected the new tree widget to have a consistent user experience as the other Material components.

#### What is the current behavior?

The subtrees hide and reveal without animation, which is a more jarring UX. Also, the transition of the chevron doesn't animate. (Perhaps it could be made to with additional coding, but ExpansionPanel doesn't require it.)

#### What are the steps to reproduce?

Compare the sample pages between the [Tree Widgets](https://material.angular.io/components/tree/examples) vs. [Expansion Panel Widgets](https://material.angular.io/components/expansion/examples)

#### What is the use-case or motivation for changing an existing behavior?

When I play with hide/show on the expansion panel and compare that to hide/show on a subtree, it just doesn't feel like a consistent user experience. Given (1) how much Material Design emphasizes motion to guide users through spatial relationships, and (2) how there are default animations for ExpansionPanel, Stepper, and Tabs, it really makes Tree appear the oddball out.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.0.7
Material 6.3.3

#### Is there anything else we should know?

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, die im Issue verlinkten Beispielseiten für Tree Widgets und Expansion Panel Widgets zu vergleichen, und verfolge anschließend das Expand-/Collapse-Verhalten des Tree Widgets sowie das entsprechende Animationsverhalten von ExpansionPanel. Als erledigt gilt die Aufgabe, wenn Änderungen der Sichtbarkeit von Teilbäumen animiert werden und der Chevron-Übergang der erwarteten Material-Interaktion entspricht, wobei die Beispiele ein konsistentes Erlebnis zeigen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

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

Neue Issues direkt in Ihr Postfach

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