From aa2b8a4dd4c47d0132227ea95c16fe91982a5d65 Mon Sep 17 00:00:00 2001 From: ulic75 Date: Wed, 21 Jun 2017 11:22:51 -0600 Subject: [PATCH 1/3] Added margin transition for improved smoothness when expanding/collapsing group panels --- src/components/expansion-panel/expansion-panel.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/expansion-panel/expansion-panel.scss b/src/components/expansion-panel/expansion-panel.scss index 097e024b..b3e4c453 100644 --- a/src/components/expansion-panel/expansion-panel.scss +++ b/src/components/expansion-panel/expansion-panel.scss @@ -76,6 +76,7 @@ $gutter-horizontal: 24px; display: block; .mdl-expansion-panel { margin: 0px; + transition: margin 250ms ease-in; &:focus { background-color: unquote("rgb(#{$palette-grey-200})"); .mdl-expansion-panel__header--expand-icon { From b774849303b080220aab0fc9ea147b4b293770ae Mon Sep 17 00:00:00 2001 From: ulic75 Date: Wed, 21 Jun 2017 11:54:37 -0600 Subject: [PATCH 2/3] Also need to add the transition for header line-height --- src/components/expansion-panel/expansion-panel.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/expansion-panel/expansion-panel.scss b/src/components/expansion-panel/expansion-panel.scss index b3e4c453..f616f5c8 100644 --- a/src/components/expansion-panel/expansion-panel.scss +++ b/src/components/expansion-panel/expansion-panel.scss @@ -23,6 +23,7 @@ $gutter-horizontal: 24px; padding: 0px $gutter-horizontal; align-items: center; line-height: 48px; + transition: line-height 250ms ease-in; @include divider(); &--list-content { flex-grow: 1; From 4913333f9581c4b0d73c96b14a98e22c04a61dbb Mon Sep 17 00:00:00 2001 From: ulic75 Date: Mon, 26 Jun 2017 14:21:31 -0600 Subject: [PATCH 3/3] Set the initial style for the false => true transition to eliminate janky loading --- .../expansion-panel/expansion-panel.component.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/expansion-panel/expansion-panel.component.ts b/src/components/expansion-panel/expansion-panel.component.ts index ea232974..61b4cd57 100644 --- a/src/components/expansion-panel/expansion-panel.component.ts +++ b/src/components/expansion-panel/expansion-panel.component.ts @@ -70,7 +70,13 @@ export class MdlExpansionPanelHeaderSecondaryContentComponent { } trigger('isExpanded', [ state('true', style({ height: '*' })), state('false', style({ height: '0px' })), - transition('* => *', animate('250ms ease-in')) + transition('false => true', [ + style({ height: '0px' }), + animate('250ms ease-in') + ]), + transition('true => false', [ + animate('250ms ease-in') + ]) ]) ] })