From 3da0e60cfdcc7c1dcfc9bcf73f09bab7cdfa5e33 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Fri, 21 Aug 2020 17:38:44 +0200 Subject: [PATCH] fix(menu): open animation not working on repeat opens This seems to be a remnant of the old menu animation. Previously when a menu was opened, we had a two step animation: scale and fade in the panel and then fade in the items a little bit later. When the latest Material design spec update was implemented, the animation was simplified to a fade in and scale only, however some of the metadata doesn't seem to have been cleaned up which is causing an issue where we set an `opacity` on the items when we close the panel for the first time, but there's nothing resetting it the next time around which ends up causing the entire animation to be skipped. Fixes #20379. --- src/material/menu/menu-animations.ts | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/material/menu/menu-animations.ts b/src/material/menu/menu-animations.ts index dcae4e5a8f31..790682f501d9 100644 --- a/src/material/menu/menu-animations.ts +++ b/src/material/menu/menu-animations.ts @@ -12,8 +12,6 @@ import{ style, animate, transition, - query, - group, AnimationTriggerMetadata, } from '@angular/animations'; @@ -40,12 +38,10 @@ export const matMenuAnimations: { opacity: 0, transform: 'scale(0.8)' })), - transition('void => enter', group([ - query('.mat-menu-content, .mat-mdc-menu-content', animate('100ms linear', style({ - opacity: 1 - }))), - animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({transform: 'scale(1)'})), - ])), + transition('void => enter', animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({ + opacity: 1, + transform: 'scale(1)' + }))), transition('* => void', animate('100ms 25ms linear', style({opacity: 0}))) ]),