From dbde855a41436d26e4f0f07460603e304cb6bbef Mon Sep 17 00:00:00 2001
From: Joey Perrott <josephperrott@gmail.com>
Date: Wed, 30 May 2018 09:25:17 -0700
Subject: [PATCH] fix(tabs): Set initial ink bar width as 0 width

---
 src/lib/tabs/_tabs-common.scss |  1 +
 src/lib/tabs/ink-bar.ts        | 11 +++++------
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/lib/tabs/_tabs-common.scss b/src/lib/tabs/_tabs-common.scss
index c92e7104a0f1..346b06160f5b 100644
--- a/src/lib/tabs/_tabs-common.scss
+++ b/src/lib/tabs/_tabs-common.scss
@@ -54,6 +54,7 @@ $mat-tab-animation-duration: 500ms !default;
   bottom: 0;
   height: $height;
   width: 1px;
+  transform: translateX(0) scaleX(0);
   transform-origin: 0;
 
   .mat-tab-group-inverted-header & {
diff --git a/src/lib/tabs/ink-bar.ts b/src/lib/tabs/ink-bar.ts
index 91ec5fb11701..74bfe1bb7829 100644
--- a/src/lib/tabs/ink-bar.ts
+++ b/src/lib/tabs/ink-bar.ts
@@ -45,9 +45,13 @@ export function _MAT_INK_BAR_POSITIONER_FACTORY(): _MatInkBarPositioner {
   selector: 'mat-ink-bar',
   host: {
     'class': 'mat-ink-bar',
+    '[class.mat-ink-bar-animations-enabled]': 'shouldAnimate',
   },
 })
 export class MatInkBar {
+  /** Whether the ink bar should animate to its position. */
+  shouldAnimate = false;
+
   constructor(
     private _elementRef: ElementRef<HTMLElement>,
     private _ngZone: NgZone,
@@ -88,12 +92,7 @@ export class MatInkBar {
     const positions = this._inkBarPositioner(element);
     const inkBar = this._elementRef.nativeElement;
 
-    // We want to prevent the ink bar from animating on the initial load.
-    // Enable animations only if the ink bar has been translated before.
-    if (inkBar.style.transform) {
-      inkBar.classList.add('mat-ink-bar-animations-enabled');
-    }
-
     inkBar.style.transform = `translateX(${positions.left}px) scaleX(${positions.width})`;
+    this.shouldAnimate = true;
   }
 }