Begin dismiss timeout after open animation completes.

Author: josephperrott

src/demo-app/snack-bar/snack-bar-demo.ts

@@ -18,7 +18,7 @@ export class SnackBarDemo {
 
   open() {
     let config = new MdSnackBarConfig();
-    config.autoHide = this.autoHide;
+    config.dismiss = this.autoHide;
     this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
   }
 }

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

@@ -41,7 +41,7 @@ export const HIDE_ANIMATION = '195ms cubic-bezier(0.0,0.0,0.2,1)';
   host: {
     'role': 'alert',
     '[@state]': 'animationState',
-    '(@state.done)': 'markAsExited($event)'
+    '(@state.done)': 'onAnimationEnd($event)'
   },
   animations: [
     trigger('state', [
@@ -58,7 +58,10 @@ export class MdSnackBarContainer extends BasePortalHost {
   @ViewChild(PortalHostDirective) _portalHost: PortalHostDirective;
 
   /** Subject for notifying that the snack bar has exited from view. */
-  private _onExit: Subject<any> = new Subject();
+  private onExit: Subject<any> = new Subject();
+
+  /** Subject for notifying that the snack bar has finished entering the view. */
+  private onEnter: Subject<any> = new Subject();
 
   /** The state of the snack bar animations. */
   animationState: SnackBarState = 'initial';
@@ -87,15 +90,21 @@ export class MdSnackBarContainer extends BasePortalHost {
   /** Begin animation of the snack bar exiting from view. */
   exit(): Observable<void> {
     this.animationState = 'complete';
-    return this._onExit.asObservable();
+    return this.onExit.asObservable();
   }
 
-  /** Mark snack bar as exited from the view. */
-  markAsExited(event: AnimationTransitionEvent) {
+  /** Handle end of animations, updating the state of the snackbar. */
+  onAnimationEnd(event: AnimationTransitionEvent) {
     if (event.toState === 'void' || event.toState === 'complete') {
       this._ngZone.run(() => {
-        this._onExit.next();
-        this._onExit.complete();
+        this.onExit.next();
+        this.onExit.complete();
+      });
+    }
+    if (event.toState === 'visible') {
+      this._ngZone.run(() => {
+        this.onEnter.next();
+        this.onEnter.complete();
       });
     }
   }
@@ -104,4 +113,9 @@ export class MdSnackBarContainer extends BasePortalHost {
   enter(): void {
     this.animationState = 'visible';
   }
+
+  /** Returns an observable resolving when the enter animation completes.  */
+  _onEnter(): Observable<void> {
+    return this.onEnter.asObservable();
+  }
 }

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

@@ -19,6 +19,9 @@ export class MdSnackBarRef<T> {
   /** Subject for notifying the user that the snack bar has closed. */
   private _afterClosed: Subject<any> = new Subject();
 
+  /** Subject for notifying the user that the snack bar has opened and appeared. */
+  private _afterOpened: Subject<any>;
+
   /** Subject for notifying the user that the snack bar action was called. */
   private _onAction: Subject<any> = new Subject();
 
@@ -51,11 +54,24 @@ export class MdSnackBarRef<T> {
     }
   }
 
+  /** Marks the snackbar as opened */
+  _open(): void {
+    if (!this._afterOpened.closed) {
+      this._afterOpened.next();
+      this._afterOpened.complete();
+    }
+  }
+
   /** Gets an observable that is notified when the snack bar is finished closing. */
   afterDismissed(): Observable<void> {
     return this._afterClosed.asObservable();
   }
 
+  /** Gets an observable that is notified when the snack bar has opened and appeared. */
+  afterOpened(): Observable<void> {
+    return this.containerInstance._onEnter();
+  }
+
   /** Gets an observable that is notified when the snack bar action is called. */
   onAction(): Observable<void> {
     return this._onAction.asObservable();

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

@@ -63,9 +63,11 @@ export class MdSnackBar {
       snackBarRef.containerInstance.enter();
     }
 
-    // TODO(josephperrott): Set dismiss setTimeout after the snackbar finishes entering the view.
+    // If a dismiss timeout is provided, set up dismiss based on after the snackbar is opened.
     if (config.dismiss > 0) {
-      setTimeout(() => snackBarRef.dismiss(), config.dismiss);
+      snackBarRef.afterOpened().subscribe(() => {
+        setTimeout(() => snackBarRef.dismiss(), config.dismiss);
+      });
     }
 
     this._live.announce(config.announcementMessage, config.politeness);