From fb72c016de4fe96d46a54d0300ec6ebb13ec9e0f Mon Sep 17 00:00:00 2001 From: crisbeto Date: Wed, 13 Jun 2018 20:25:19 +0200 Subject: [PATCH] fix(expansion): panel appearing as open when parent is animating away Fixes an issue where the expansion panel will appear as if it is open, if the element is part of a component that is animating away. The issue comes from the fact that Angular resets the animation state to `void` which we don't have in the animation definitions. Fixes #11765. --- src/lib/expansion/expansion-animations.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/lib/expansion/expansion-animations.ts b/src/lib/expansion/expansion-animations.ts index be9bdcd22957..8b0169ff4347 100644 --- a/src/lib/expansion/expansion-animations.ts +++ b/src/lib/expansion/expansion-animations.ts @@ -67,7 +67,7 @@ export const matExpansionAnimations: { }), { params: {expandedHeight: '64px'} }), - transition('expanded <=> collapsed, void => collapsed', group([ + transition('expanded <=> collapsed, expanded <=> void, void => collapsed', group([ query('@indicatorRotate', animateChild(), {optional: true}), animate(EXPANSION_PANEL_ANIMATION_TIMING), ])), @@ -75,9 +75,11 @@ export const matExpansionAnimations: { /** Animation that expands and collapses the panel content. */ bodyExpansion: trigger('bodyExpansion', [ + // Note: we also have `void` here as a fallback, because Angular will reset the + // state back to void when the element is being removed. See #11765. state('collapsed, void', style({height: '0px', visibility: 'hidden'})), state('expanded', style({height: '*', visibility: 'visible'})), - transition('expanded <=> collapsed, void => collapsed', - animate(EXPANSION_PANEL_ANIMATION_TIMING)), + transition('expanded <=> collapsed, expanded <=> void, void => collapsed', + animate(EXPANSION_PANEL_ANIMATION_TIMING)), ]) };