fixup! feat(material-experimental/mdc-autocomplete): add panel animation

Author: mmalerba

src/material-experimental/mdc-autocomplete/BUILD.bazel

@@ -20,6 +20,7 @@ ng_module(
         "//src/material-experimental/mdc-core",
         "//src/material/autocomplete",
         "@npm//@angular/common",
+        "@npm//@material/menu-surface",
     ],
 )
 

src/material-experimental/mdc-autocomplete/animations.ts

@@ -15,24 +15,25 @@ import {
   transition,
   trigger
 } from '@angular/animations';
+import {numbers as menuSurfaceConstants} from '@material/menu-surface';
 
 // Animation values come from
 // https://github.com/material-components/material-components-web/blob/master/packages/mdc-menu-surface/_mixins.scss
 // TODO(mmalerba): Ideally find a way to import the values from MDC's code.
 export const panelAnimation: AnimationTriggerMetadata = trigger('panelAnimation', [
-  state('hidden', style({})),
-  state('visible', style({})),
+  state('void, hidden', style({
+    opacity: 0,
+    transform: 'scale(0.8)',
+  })),
   transition(':enter, hidden => visible', [
-    style({
-      opacity: 0,
-      transform: 'scale(0.8)',
-    }),
     group([
         animate('0.03s linear', style({ opacity: 1 })),
-        animate('0.12s cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'scale(1)' })),
+        animate(
+            `${menuSurfaceConstants.TRANSITION_OPEN_DURATION}ms cubic-bezier(0, 0, 0.2, 1)`,
+            style({ transform: 'scale(1)' })),
     ]),
   ]),
   transition(':leave, visible => hidden', [
-    animate('0.075s linear', style({ opacity: 0 })),
+    animate(`${menuSurfaceConstants.TRANSITION_CLOSE_DURATION}ms linear`, style({ opacity: 0 })),
   ]),
 ]);