fix(snack-bar): positioned snack bar animation not starting off-screen (#7453)

Author: crisbeto

src/lib/snack-bar/snack-bar-container.scss

@@ -15,22 +15,29 @@ $mat-snack-bar-spacing-margin: 24px !default;
   min-width: $mat-snack-bar-min-width;
   padding: $mat-snack-bar-padding;
   // Initial transformation is applied to start snack bar out of view, below its target position.
-  transform: translateY(100%);
+  // Note: it's preferred to use a series of transforms, instead of something like `calc()`, because
+  // IE won't animate transforms that contain a `calc`.
+  transform: translateY(100%) translateY($mat-snack-bar-spacing-margin);
 
-  /** 
+  /**
    * Removes margin of snack bars which are center positioned horizontally.  This
    * is done to align snack bars to the edge of the view vertically to match spec.
    */
   &.mat-snack-bar-center {
     margin: 0;
+    transform: translateY(100%);
   }
 
   /**
    * To allow for animations from a 'top' vertical position to animate in a downward
    * direction, set the translation to start the snack bar above the target position.
    */
   &.mat-snack-bar-top {
-    transform: translateY(-100%);
+    transform: translateY(-100%) translateY(#{-$mat-snack-bar-spacing-margin});
+
+    &.mat-snack-bar-center {
+      transform: translateY(-100%);
+    }
   }
 
   @include cdk-high-contrast {

src/lib/snack-bar/snack-bar-container.ts

@@ -63,17 +63,10 @@ export const HIDE_ANIMATION = '195ms cubic-bezier(0.0,0.0,0.2,1)';
   },
   animations: [
     trigger('state', [
-      // Animation from top.
-      state('visible-top', style({transform: 'translateY(0%)'})),
-      state('hidden-top', style({transform: 'translateY(-100%)'})),
-      transition('visible-top => hidden-top', animate(HIDE_ANIMATION)),
-      transition('void => visible-top', animate(SHOW_ANIMATION)),
-      // Animation from bottom.
-      state('visible-bottom', style({transform: 'translateY(0%)'})),
-      state('hidden-bottom', style({transform: 'translateY(100%)'})),
-      transition('visible-bottom => hidden-bottom', animate(HIDE_ANIMATION)),
-      transition('void => visible-bottom',
-        animate(SHOW_ANIMATION)),
+      state('visible-top, visible-bottom', style({transform: 'translateY(0%)'})),
+      transition('visible-top => hidden-top, visible-bottom => hidden-bottom',
+        animate(HIDE_ANIMATION)),
+      transition('void => visible-top, void => visible-bottom', animate(SHOW_ANIMATION)),
     ])
   ],
 })