From f91e1d389a02ce0f3c2bcfb803272f8a3bb7e975 Mon Sep 17 00:00:00 2001 From: Chris Krolak Date: Tue, 11 Sep 2018 17:09:13 -0700 Subject: [PATCH 1/5] fix: MatExpansionPanel animations fix MatExpansionPanel when included in a sortable MatTable See issue #11990 for more details. Closes #11990 --- src/lib/expansion/expansion-animations.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/lib/expansion/expansion-animations.ts b/src/lib/expansion/expansion-animations.ts index 47e243f9d1ee..28735a43683c 100644 --- a/src/lib/expansion/expansion-animations.ts +++ b/src/lib/expansion/expansion-animations.ts @@ -28,14 +28,14 @@ export const matExpansionAnimations: { } = { /** Animation that rotates the indicator arrow. */ indicatorRotate: trigger('indicatorRotate', [ - state('collapsed', style({transform: 'rotate(0deg)'})), + state('collapsed, void', style({transform: 'rotate(0deg)'})), state('expanded', style({transform: 'rotate(180deg)'})), - transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)), + transition('* <=> *', animate(EXPANSION_PANEL_ANIMATION_TIMING)), ]), /** Animation that expands and collapses the panel header height. */ expansionHeaderHeight: trigger('expansionHeight', [ - state('collapsed', style({ + state('collapsed, void', style({ height: '{{collapsedHeight}}', }), { params: {collapsedHeight: '48px'}, @@ -45,7 +45,7 @@ export const matExpansionAnimations: { }), { params: {expandedHeight: '64px'} }), - transition('expanded <=> collapsed', group([ + transition('* <=> *', group([ query('@indicatorRotate', animateChild(), {optional: true}), animate(EXPANSION_PANEL_ANIMATION_TIMING), ])), @@ -53,8 +53,8 @@ export const matExpansionAnimations: { /** Animation that expands and collapses the panel content. */ bodyExpansion: trigger('bodyExpansion', [ - state('collapsed', style({height: '0px', visibility: 'hidden'})), + state('collapsed, void', style({height: '0px', visibility: 'hidden'})), state('expanded', style({height: '*', visibility: 'visible'})), - transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)), + transition('* <=> *', animate(EXPANSION_PANEL_ANIMATION_TIMING)), ]) }; From a1aad13ca57425da40692dc0062f11d696554c80 Mon Sep 17 00:00:00 2001 From: Chris Krolak Date: Tue, 11 Sep 2018 17:36:16 -0700 Subject: [PATCH 2/5] fix(expansion): MatExpansionPanel animations fix MatExpansionPanel when included in a sortable MatTable See issue #11990 for more details. Fixes #11990 --- src/lib/expansion/expansion-animations.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/expansion/expansion-animations.ts b/src/lib/expansion/expansion-animations.ts index 28735a43683c..98ac2f38b7cb 100644 --- a/src/lib/expansion/expansion-animations.ts +++ b/src/lib/expansion/expansion-animations.ts @@ -28,9 +28,9 @@ export const matExpansionAnimations: { } = { /** Animation that rotates the indicator arrow. */ indicatorRotate: trigger('indicatorRotate', [ - state('collapsed, void', style({transform: 'rotate(0deg)'})), + state('collapsed', style({transform: 'rotate(0deg)'})), state('expanded', style({transform: 'rotate(180deg)'})), - transition('* <=> *', animate(EXPANSION_PANEL_ANIMATION_TIMING)), + transition('collapsed <=> expanded', animate(EXPANSION_PANEL_ANIMATION_TIMING)), ]), /** Animation that expands and collapses the panel header height. */ From c49d629b329524f9d325e9ff30b9716a9b5c664f Mon Sep 17 00:00:00 2001 From: chriskrolak <43190429+chriskrolak@users.noreply.github.com> Date: Thu, 13 Sep 2018 13:58:03 -0700 Subject: [PATCH 3/5] fix(expansion): MatExpansionPanel animations fix(expansion): MatExpansionPanel animations fix MatExpansionPanel when included in a sortable MatTable See issue #11990 for more details. Fixes #11990 --- src/lib/expansion/expansion-animations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/expansion/expansion-animations.ts b/src/lib/expansion/expansion-animations.ts index 98ac2f38b7cb..ed03b5b54f32 100644 --- a/src/lib/expansion/expansion-animations.ts +++ b/src/lib/expansion/expansion-animations.ts @@ -30,7 +30,7 @@ export const matExpansionAnimations: { indicatorRotate: trigger('indicatorRotate', [ state('collapsed', style({transform: 'rotate(0deg)'})), state('expanded', style({transform: 'rotate(180deg)'})), - transition('collapsed <=> expanded', animate(EXPANSION_PANEL_ANIMATION_TIMING)), + transition('* <=> *', animate(EXPANSION_PANEL_ANIMATION_TIMING)), ]), /** Animation that expands and collapses the panel header height. */ From 9a10979a776e2ddd1e3f2fb37075cf9d7da8f64c Mon Sep 17 00:00:00 2001 From: chriskrolak <43190429+chriskrolak@users.noreply.github.com> Date: Thu, 13 Sep 2018 18:12:46 -0700 Subject: [PATCH 4/5] fix(expansion): MatExpansionPanel animations fix(expansion): MatExpansionPanel animations fix MatExpansionPanel when included in a sortable MatTable See issue #11990 for more details. Fixes #11990 --- src/lib/expansion/expansion-animations.ts | 31 +++++++++++++++++++---- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/src/lib/expansion/expansion-animations.ts b/src/lib/expansion/expansion-animations.ts index ed03b5b54f32..dc5b7d26b9b1 100644 --- a/src/lib/expansion/expansion-animations.ts +++ b/src/lib/expansion/expansion-animations.ts @@ -20,7 +20,26 @@ import { /** Time and timing curve for expansion panel animations. */ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)'; -/** Animations used by the Material expansion panel. */ +/** + * Animations used by the Material expansion panel. + * + * A bug in angular animation's `state` when ViewContainers are moved using ViewContainerRef.move() + * causes the animation state of moved components to become `void` upon exit, and not update again + * upon reentry into the DOM. This can lead a to situation for the expansion panel where the state + * of the panel is `expanded` or `collapsed` but the animation state is `void`. + * + * To correctly handle animating to the next state, we animate between `void` and `collapsed` which + * are defined to have the same styles. Since angular animates from the current styles to the + * destination state's style definition, in situations where we are moving from `void`'s styles to + * `collapsed` this acts a noop since no style values change. + * + * In the case where angular's animation state is out of sync with the expansion panel's state, the + * expansion panel being `expanded` and angular animations being`void`, the animation from the + * `expanded`'s effective styles (though in a `void` animation state) to the collapsed state will + * occur as expected. + * + * Angular Bug: https://github.com/angular/angular/issues/18847 + **/ export const matExpansionAnimations: { readonly indicatorRotate: AnimationTriggerMetadata; readonly expansionHeaderHeight: AnimationTriggerMetadata; @@ -28,9 +47,10 @@ export const matExpansionAnimations: { } = { /** Animation that rotates the indicator arrow. */ indicatorRotate: trigger('indicatorRotate', [ - state('collapsed', style({transform: 'rotate(0deg)'})), + state('collapsed, void', style({transform: 'rotate(0deg)'})), state('expanded', style({transform: 'rotate(180deg)'})), - transition('* <=> *', animate(EXPANSION_PANEL_ANIMATION_TIMING)), + transition('expanded <=> collapsed, void => collapsed', + animate(EXPANSION_PANEL_ANIMATION_TIMING)), ]), /** Animation that expands and collapses the panel header height. */ @@ -45,7 +65,7 @@ export const matExpansionAnimations: { }), { params: {expandedHeight: '64px'} }), - transition('* <=> *', group([ + transition('expanded <=> collapsed, void => collapsed', group([ query('@indicatorRotate', animateChild(), {optional: true}), animate(EXPANSION_PANEL_ANIMATION_TIMING), ])), @@ -55,6 +75,7 @@ export const matExpansionAnimations: { bodyExpansion: trigger('bodyExpansion', [ state('collapsed, void', style({height: '0px', visibility: 'hidden'})), state('expanded', style({height: '*', visibility: 'visible'})), - transition('* <=> *', animate(EXPANSION_PANEL_ANIMATION_TIMING)), + transition('expanded <=> collapsed, void => collapsed', + animate(EXPANSION_PANEL_ANIMATION_TIMING)), ]) }; From c0c3d48f637d04570722a99c805355c9985584c6 Mon Sep 17 00:00:00 2001 From: Joey Perrott Date: Fri, 14 Sep 2018 08:00:19 -0700 Subject: [PATCH 5/5] Update expansion-animations.ts --- src/lib/expansion/expansion-animations.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/lib/expansion/expansion-animations.ts b/src/lib/expansion/expansion-animations.ts index dc5b7d26b9b1..09ac5f99b486 100644 --- a/src/lib/expansion/expansion-animations.ts +++ b/src/lib/expansion/expansion-animations.ts @@ -27,19 +27,19 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2, * causes the animation state of moved components to become `void` upon exit, and not update again * upon reentry into the DOM. This can lead a to situation for the expansion panel where the state * of the panel is `expanded` or `collapsed` but the animation state is `void`. - * + * * To correctly handle animating to the next state, we animate between `void` and `collapsed` which * are defined to have the same styles. Since angular animates from the current styles to the * destination state's style definition, in situations where we are moving from `void`'s styles to * `collapsed` this acts a noop since no style values change. - * + * * In the case where angular's animation state is out of sync with the expansion panel's state, the * expansion panel being `expanded` and angular animations being`void`, the animation from the - * `expanded`'s effective styles (though in a `void` animation state) to the collapsed state will + * `expanded`'s effective styles (though in a `void` animation state) to the collapsed state will * occur as expected. - * + * * Angular Bug: https://github.com/angular/angular/issues/18847 - **/ + */ export const matExpansionAnimations: { readonly indicatorRotate: AnimationTriggerMetadata; readonly expansionHeaderHeight: AnimationTriggerMetadata;