fix(snack-bar): add content fade in animation (#7504)

angular · Oct 6, 2017 · 2b9c470 · 2b9c470
1 parent 5eb5cbd
commit 2b9c470
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/lib/snack-bar/simple-snack-bar.scss b/src/lib/snack-bar/simple-snack-bar.scss
@@ -8,6 +8,7 @@ $mat-snack-bar-button-margin: 48px !default;
   display: flex;
   justify-content: space-between;
   line-height: 20px;
+  opacity: 1;
 }
 
 .mat-simple-snackbar-action {

diff --git a/src/lib/snack-bar/simple-snack-bar.ts b/src/lib/snack-bar/simple-snack-bar.ts
@@ -7,6 +7,8 @@
  */
 
 import {Component, ViewEncapsulation, Inject, ChangeDetectionStrategy} from '@angular/core';
+import {trigger, style, transition, animate} from '@angular/animations';
+import {AnimationCurves, AnimationDurations} from '@angular/material/core';
 import {MatSnackBarRef} from './snack-bar-ref';
 import {MAT_SNACK_BAR_DATA} from './snack-bar-config';
 
@@ -23,7 +25,16 @@ import {MAT_SNACK_BAR_DATA} from './snack-bar-config';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('contentFade', [
+      transition(':enter', [
+        style({opacity: '0'}),
+        animate(`${AnimationDurations.COMPLEX} ${AnimationCurves.STANDARD_CURVE}`)
+      ])
+    ])
+  ],
   host: {
+    '[@contentFade]': '',
     'class': 'mat-simple-snackbar',
   }
 })