From 187bb015f8607e556a1320683ef905bf89503fe4 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 1 Oct 2017 17:54:20 +0200
Subject: [PATCH] fix(snack-bar): positioned snack bar animation not starting
 off-screen

Currently, if a snack bar is positioned in one of the corners of the screen, it'll get a margin. This margin causes the snack bar's animation to start inside the viewport instead of off-screen. These changes fix the initial styling so the animation starts off-screen, in addition to simplifying some of the animation styles.
---
 src/lib/snack-bar/snack-bar-container.scss | 13 ++++++++++---
 src/lib/snack-bar/snack-bar-container.ts   | 15 ++++-----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/lib/snack-bar/snack-bar-container.scss b/src/lib/snack-bar/snack-bar-container.scss
index 72e1ae221690..1a4c966a3e5e 100644
--- a/src/lib/snack-bar/snack-bar-container.scss
+++ b/src/lib/snack-bar/snack-bar-container.scss
@@ -15,14 +15,17 @@ $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%);
   }
 
   /**
@@ -30,7 +33,11 @@ $mat-snack-bar-spacing-margin: 24px !default;
    * 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 {
diff --git a/src/lib/snack-bar/snack-bar-container.ts b/src/lib/snack-bar/snack-bar-container.ts
index 84eeeea76c53..8b117ac374cd 100644
--- a/src/lib/snack-bar/snack-bar-container.ts
+++ b/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)),
     ])
   ],
 })