fix(tabs): better handling of animationDuration without units

Based off of the discussions on #13428. Handles values passed to `animationDuration` that don't have units, rather than allowing them to continue through to  the `BrowserAnimationsModule` and to throw an error.

Author: crisbeto

src/lib/tabs/tab-group.spec.ts

@@ -622,7 +622,7 @@ describe('nested MatTabGroup with enabled animations', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [MatTabsModule, BrowserAnimationsModule],
-      declarations: [NestedTabs]
+      declarations: [NestedTabs, TabsWithCustomAnimationDuration]
     });
 
     TestBed.compileComponents();
@@ -635,6 +635,14 @@ describe('nested MatTabGroup with enabled animations', () => {
       tick();
     }).not.toThrow();
   }));
+
+  it('should not throw when setting an animationDuration without units', fakeAsync(() => {
+    expect(() => {
+      let fixture = TestBed.createComponent(TabsWithCustomAnimationDuration);
+      fixture.detectChanges();
+      tick();
+    }).not.toThrow();
+  }));
 });
 
 
@@ -861,3 +869,14 @@ class TabGroupWithAriaInputs {
 })
 class TabGroupWithIsActiveBinding {
 }
+
+
+@Component({
+  template: `
+    <mat-tab-group animationDuration="500">
+      <mat-tab label="One">Tab one content</mat-tab>
+      <mat-tab label="Two">Tab two content</mat-tab>
+    </mat-tab-group>
+  `,
+})
+class TabsWithCustomAnimationDuration {}

src/lib/tabs/tab-group.ts

@@ -43,6 +43,9 @@ import {MatTabHeader} from './tab-header';
 /** Used to generate unique ID's for each tab component */
 let nextId = 0;
 
+/** Regex used to check whether a value has CSS units. */
+const cssUnitPattern = /([A-Za-z%]+)$/;
+
 /** A simple change event emitted on focus or selection changes. */
 export class MatTabChangeEvent {
   /** Index of the currently-selected tab. */
@@ -129,8 +132,14 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
   /** Position of the tab header. */
   @Input() headerPosition: MatTabHeaderPosition = 'above';
 
-  /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */
-  @Input() animationDuration: string;
+  /** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */
+  @Input()
+  get animationDuration(): string { return this._animationDuration; }
+  set animationDuration(value: string) {
+    this._animationDuration = (typeof value === 'number' || !cssUnitPattern.test(value)) ?
+      value + 'ms' : value;
+  }
+  private _animationDuration: string;
 
   /** Background color of the tab group. */
   @Input()