From a43faac24e9e78f58bbc38378f7be7aa95072060 Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Mon, 7 Aug 2017 15:37:31 -0700
Subject: [PATCH 1/4] Add animation

---
 src/cdk/stepper/stepper.ts              | 14 ++++++++++++++
 src/lib/stepper/stepper-horizontal.html |  1 +
 src/lib/stepper/stepper-horizontal.ts   | 21 +++++++++++++++++++++
 src/lib/stepper/stepper-vertical.html   |  3 ++-
 src/lib/stepper/stepper.scss            | 22 +++++++++++++++++++---
 src/lib/stepper/stepper.ts              | 17 +++++++++++++++++
 6 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts
index 428095a806a0..92973a4d899d 100644
--- a/src/cdk/stepper/stepper.ts
+++ b/src/cdk/stepper/stepper.ts
@@ -80,6 +80,8 @@ export class CdkStepper {
   /** The list of step headers of the steps in the stepper. */
   _stepHeader: QueryList<ElementRef>;
 
+  _verticalContent: ElementRef;
+
   /** The index of the selected step. */
   @Input()
   get selectedIndex() { return this._selectedIndex; }
@@ -133,6 +135,18 @@ export class CdkStepper {
   }
 
   private _emitStepperSelectionEvent(newIndex: number): void {
+    // if (this._verticalContent != null) {
+    //   this._verticalContent.toArray()[newIndex].nativeElement.style.height = this._verticalContent.toArray()[this._selectedIndex].nativeElement.offsetHeight+'px';
+    //   this._verticalContent.toArray()[this._selectedIndex].nativeElement.style.height = '0px';
+    //   console.log(this._verticalContent.toArray()[newIndex].nativeElement.offsetHeight);
+    // }
+
+    if (this._verticalContent != null) {
+      //console.log(this._verticalContent.nativeElement.clientHeight);
+      if (this._verticalContent.nativeElement.clientHeight) this._verticalContent.nativeElement.style.height = 0;
+      else this._verticalContent.nativeElement.height = this._verticalContent.nativeElement.scrollHeight+'px';
+
+    }
     const stepsArray = this._steps.toArray();
     this.selectionChange.emit({
       selectedIndex: newIndex,
diff --git a/src/lib/stepper/stepper-horizontal.html b/src/lib/stepper/stepper-horizontal.html
index 5937fd04551b..7be2458c41ba 100644
--- a/src/lib/stepper/stepper-horizontal.html
+++ b/src/lib/stepper/stepper-horizontal.html
@@ -27,6 +27,7 @@
 
 <div *ngFor="let step of _steps; let i = index"
      class="mat-horizontal-stepper-content" role="tabpanel"
+     [@stepEnterExit]="step._position"
      [id]="_getStepContentId(i)"
      [attr.aria-labelledby]="_getStepLabelId(i)"
      [attr.aria-expanded]="selectedIndex == i">
diff --git a/src/lib/stepper/stepper-horizontal.ts b/src/lib/stepper/stepper-horizontal.ts
index 1609d6a9c7df..8c9a3f3148d1 100644
--- a/src/lib/stepper/stepper-horizontal.ts
+++ b/src/lib/stepper/stepper-horizontal.ts
@@ -8,6 +8,7 @@
 
 import {Component} from '@angular/core';
 import {MdStepper} from './stepper';
+import {animate, state, style, transition, trigger} from '@angular/animations';
 
 @Component({
   moduleId: module.id,
@@ -19,6 +20,26 @@ import {MdStepper} from './stepper';
     'class': 'mat-stepper-horizontal',
     'role': 'tablist',
   },
+  animations: [
+    trigger('stepEnterExit', [
+      state('void', style({transform: 'translate3d(0%, 0, 0)'})),
+      state('left', style({transform: 'translate3d(-100%, 0, 0)'})),
+      state('left-origin-center', style({transform: 'translate3d(0%, 0, 0)'})),
+      state('right-origin-center', style({transform: 'translate3d(0%, 0, 0)'})),
+      state('center', style({transform: 'translate3d(0%, 0, 0)'})),
+      state('right', style({transform: 'translate3d(100%, 0, 0)'})),
+      transition('* => left, * => right, left => center, right => center',
+          animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')),
+      transition('void => left-origin-center', [
+        style({transform: 'translate3d(-100%, 0, 0)'}),
+        animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')
+      ]),
+      transition('void => right-origin-center', [
+        style({transform: 'translate3d(100%, 0, 0)'}),
+        animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')
+      ])
+    ])
+  ],
   providers: [{provide: MdStepper, useExisting: MdHorizontalStepper}]
 })
 export class MdHorizontalStepper extends MdStepper { }
diff --git a/src/lib/stepper/stepper-vertical.html b/src/lib/stepper/stepper-vertical.html
index dfc87e4a4eb4..33e116cfd8d2 100644
--- a/src/lib/stepper/stepper-vertical.html
+++ b/src/lib/stepper/stepper-vertical.html
@@ -20,7 +20,8 @@
 
   </div>
   <div class="vertical-content-container">
-    <div class="mat-vertical-stepper-content" role="tabpanel"
+    <div *ngIf="selectedIndex==i" #verticalContent
+         class="mat-vertical-stepper-content" role="tabpanel"
          [id]="_getStepContentId(i)"
          [attr.aria-labelledby]="_getStepLabelId(i)"
          [attr.aria-expanded]="selectedIndex == i">
diff --git a/src/lib/stepper/stepper.scss b/src/lib/stepper/stepper.scss
index 7e2cd497af27..409ac5a21b59 100644
--- a/src/lib/stepper/stepper.scss
+++ b/src/lib/stepper/stepper.scss
@@ -1,3 +1,5 @@
+@import '../core/style/variables';
+
 $mat-horizontal-stepper-header-height: 72px !default;
 $mat-label-header-height: 24px !default;
 $mat-stepper-label-min-width: 50px !default;
@@ -55,6 +57,7 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
   display: flex;
   align-items: center;
   margin: $mat-connector-line-gap 0;
+  outline: none;
 
   .mat-stepper-index {
     margin-right: $mat-vertical-stepper-content-margin;
@@ -70,8 +73,16 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
   height: 0;
 }
 
-.mat-horizontal-stepper-content[aria-expanded='false'] {
-    display: none;
+.mat-horizontal-stepper-content {
+  //transition: opacity 5s $ease-in-out-curve-function;
+  transition: 5s;
+  height: inherit;
+
+  &[aria-expanded='false'] {
+    //display: none;
+    height: 0;
+    overflow: hidden;
+  }
 }
 
 .vertical-content-container {
@@ -83,13 +94,18 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
 
 .mat-vertical-stepper-content {
   padding-left: $mat-stepper-side-gap;
+  transition: transform 2s $ease-in-out-curve-function;
+  //height: inherit;
 
   &[aria-expanded='false'] {
-    display: none;
+    //height: 0;
+    overflow: hidden;
+    transform: scaleY(0);
   }
 
   &[aria-expanded='true'] {
     padding: $mat-vertical-stepper-content-padding;
+    transform: scaleY(1);
   }
 }
 
diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts
index f76c63bdd6c0..8bc22d035485 100644
--- a/src/lib/stepper/stepper.ts
+++ b/src/lib/stepper/stepper.ts
@@ -15,11 +15,15 @@ import {
   // considers such imports as unused (https://github.com/Microsoft/TypeScript/issues/14953)
   // tslint:disable-next-line:no-unused-variable
   ElementRef,
+  QueryList, ViewChild,
+  ElementRef,
   QueryList,
   ViewChildren
 }from '@angular/core';
 import {MdStepLabel} from './step-label';
 
+export type MdStepContentPositionState = 'left' | 'center' | 'right';
+
 @Component({
   moduleId: module.id,
   selector: 'md-step, mat-step',
@@ -29,6 +33,17 @@ export class MdStep extends CdkStep {
   /** Content for step label given by <ng-template matStepLabel> or <ng-template mdStepLabel>. */
   @ContentChild(MdStepLabel) stepLabel: MdStepLabel;
 
+  _position: MdStepContentPositionState;
+  set position(position: number) {
+    if (position < 0) {
+      this._position = 'left';
+    } else if (position > 0) {
+      this._position = 'right';
+    } else {
+      this._position = 'center';
+    }
+  }
+
   constructor(mdStepper: MdStepper) {
     super(mdStepper);
   }
@@ -38,6 +53,8 @@ export class MdStepper extends CdkStepper {
   /** The list of step headers of the steps in the stepper. */
   @ViewChildren('stepHeader') _stepHeader: QueryList<ElementRef>;
 
+  @ViewChild('verticalContent') _verticalContent: ElementRef;
+
   /** Steps that the stepper holds. */
   @ContentChildren(MdStep) _steps: QueryList<MdStep>;
 }

From 23ebe6f56d3f4be5c0d44214b41bc83b4a257308 Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Tue, 8 Aug 2017 14:09:17 -0700
Subject: [PATCH 2/4] Implement Angular animation

---
 src/cdk/stepper/stepper.ts              | 35 ++++++++++++++++++++++---
 src/lib/stepper/stepper-horizontal.html | 17 ++++++------
 src/lib/stepper/stepper-horizontal.ts   | 13 +--------
 src/lib/stepper/stepper-vertical.html   |  7 +++--
 src/lib/stepper/stepper-vertical.ts     | 15 +++++++++++
 src/lib/stepper/stepper.scss            | 28 +++++++++++++-------
 src/lib/stepper/stepper.ts              | 14 ----------
 7 files changed, 80 insertions(+), 49 deletions(-)

diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts
index 92973a4d899d..532f1b4e21e1 100644
--- a/src/cdk/stepper/stepper.ts
+++ b/src/cdk/stepper/stepper.ts
@@ -20,7 +20,7 @@ import {
   Component,
   ContentChild,
   ViewChild,
-  TemplateRef
+  TemplateRef, AfterContentChecked
 } from '@angular/core';
 import {LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE} from '@angular/cdk/keyboard';
 import {CdkStepLabel} from './step-label';
@@ -28,6 +28,8 @@ import {CdkStepLabel} from './step-label';
 /** Used to generate unique ID for each stepper component. */
 let nextId = 0;
 
+export type CdkStepContentPositionState = 'left' | 'center' | 'right';
+
 /** Change event emitted on selection changes. */
 export class CdkStepperSelectionEvent {
   /** Index of the step now selected. */
@@ -58,6 +60,17 @@ export class CdkStep {
   @Input()
   label: string;
 
+  _position: CdkStepContentPositionState;
+  set position(position: number) {
+    if (position < 0) {
+      this._position = 'left';
+    } else if (position > 0) {
+      this._position = 'right';
+    } else {
+      this._position = 'center';
+    }
+  }
+
   constructor(private _stepper: CdkStepper) { }
 
   /** Selects this step component. */
@@ -73,7 +86,7 @@ export class CdkStep {
     '(keydown)': '_onKeydown($event)',
   },
 })
-export class CdkStepper {
+export class CdkStepper implements AfterContentChecked {
   /** The list of step components that the stepper is holding. */
   @ContentChildren(CdkStep) _steps: QueryList<CdkStep>;
 
@@ -89,6 +102,7 @@ export class CdkStepper {
     if (this._selectedIndex != index) {
       this._emitStepperSelectionEvent(index);
       this._focusStep(this._selectedIndex);
+      this._setStepPosition();
     }
   }
   private _selectedIndex: number = 0;
@@ -114,6 +128,10 @@ export class CdkStepper {
     this._groupId = nextId++;
   }
 
+  ngAfterContentChecked(): void {
+    this._setStepPosition();
+  }
+
   /** Selects and focuses the next step in list. */
   next(): void {
     this.selectedIndex = Math.min(this._selectedIndex + 1, this._steps.length - 1);
@@ -144,7 +162,7 @@ export class CdkStepper {
     if (this._verticalContent != null) {
       //console.log(this._verticalContent.nativeElement.clientHeight);
       if (this._verticalContent.nativeElement.clientHeight) this._verticalContent.nativeElement.style.height = 0;
-      else this._verticalContent.nativeElement.height = this._verticalContent.nativeElement.scrollHeight+'px';
+      else this._verticalContent.nativeElement.height = this._verticalContent.nativeElement.scrollHeight + 'px';
 
     }
     const stepsArray = this._steps.toArray();
@@ -176,8 +194,19 @@ export class CdkStepper {
     event.preventDefault();
   }
 
+  _getExpandedState(index: number) {
+    return index == this._selectedIndex ? 'expanded' : 'collapsed';
+  }
+
   private _focusStep(index: number) {
     this._focusIndex = index;
     this._stepHeader.toArray()[this._focusIndex].nativeElement.focus();
   }
+
+  private _setStepPosition() {
+    this._steps.forEach((step: CdkStep, index: number) => {
+      step.position = index - this._selectedIndex;
+    });
+    console.log('here');
+  }
 }
diff --git a/src/lib/stepper/stepper-horizontal.html b/src/lib/stepper/stepper-horizontal.html
index 7be2458c41ba..0ea15e6023a7 100644
--- a/src/lib/stepper/stepper-horizontal.html
+++ b/src/lib/stepper/stepper-horizontal.html
@@ -24,12 +24,13 @@
     <div *ngIf="!isLast" class="connector-line"></div>
   </ng-container>
 </div>
-
-<div *ngFor="let step of _steps; let i = index"
-     class="mat-horizontal-stepper-content" role="tabpanel"
-     [@stepEnterExit]="step._position"
-     [id]="_getStepContentId(i)"
-     [attr.aria-labelledby]="_getStepLabelId(i)"
-     [attr.aria-expanded]="selectedIndex == i">
-  <ng-container [ngTemplateOutlet]="step.content"></ng-container>
+<div class="horizontal-content-container">
+  <div *ngFor="let step of _steps; let i = index"
+       class="mat-horizontal-stepper-content" role="tabpanel"
+       [@stepEnterExit]="step._position"
+       [id]="_getStepContentId(i)"
+       [attr.aria-labelledby]="_getStepLabelId(i)"
+       [attr.aria-expanded]="selectedIndex == i">
+    <ng-container [ngTemplateOutlet]="step.content"></ng-container>
+  </div>
 </div>
diff --git a/src/lib/stepper/stepper-horizontal.ts b/src/lib/stepper/stepper-horizontal.ts
index 8c9a3f3148d1..c7b6a02859fb 100644
--- a/src/lib/stepper/stepper-horizontal.ts
+++ b/src/lib/stepper/stepper-horizontal.ts
@@ -22,22 +22,11 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
   },
   animations: [
     trigger('stepEnterExit', [
-      state('void', style({transform: 'translate3d(0%, 0, 0)'})),
       state('left', style({transform: 'translate3d(-100%, 0, 0)'})),
-      state('left-origin-center', style({transform: 'translate3d(0%, 0, 0)'})),
-      state('right-origin-center', style({transform: 'translate3d(0%, 0, 0)'})),
       state('center', style({transform: 'translate3d(0%, 0, 0)'})),
       state('right', style({transform: 'translate3d(100%, 0, 0)'})),
       transition('* => left, * => right, left => center, right => center',
-          animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')),
-      transition('void => left-origin-center', [
-        style({transform: 'translate3d(-100%, 0, 0)'}),
-        animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')
-      ]),
-      transition('void => right-origin-center', [
-        style({transform: 'translate3d(100%, 0, 0)'}),
-        animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')
-      ])
+          animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
     ])
   ],
   providers: [{provide: MdStepper, useExisting: MdHorizontalStepper}]
diff --git a/src/lib/stepper/stepper-vertical.html b/src/lib/stepper/stepper-vertical.html
index 33e116cfd8d2..b7b4ca006829 100644
--- a/src/lib/stepper/stepper-vertical.html
+++ b/src/lib/stepper/stepper-vertical.html
@@ -20,12 +20,15 @@
 
   </div>
   <div class="vertical-content-container">
-    <div *ngIf="selectedIndex==i" #verticalContent
+    <div #verticalContent
          class="mat-vertical-stepper-content" role="tabpanel"
+         [@stepExpandCollapse]="_getExpandedState(i)"
          [id]="_getStepContentId(i)"
          [attr.aria-labelledby]="_getStepLabelId(i)"
          [attr.aria-expanded]="selectedIndex == i">
-      <ng-container [ngTemplateOutlet]="step.content"></ng-container>
+      <div class="vertical-content">
+        <ng-container[ngTemplateOutlet]="step.content"></ng-container>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/lib/stepper/stepper-vertical.ts b/src/lib/stepper/stepper-vertical.ts
index 52fc6038a44b..d326b1871155 100644
--- a/src/lib/stepper/stepper-vertical.ts
+++ b/src/lib/stepper/stepper-vertical.ts
@@ -8,6 +8,7 @@
 
 import {Component} from '@angular/core';
 import {MdStepper} from './stepper';
+import {animate, state, style, transition, trigger} from '@angular/animations';
 
 @Component({
   moduleId: module.id,
@@ -19,6 +20,20 @@ import {MdStepper} from './stepper';
     'class': 'mat-stepper-vertical',
     'role': 'tablist',
   },
+  animations: [
+      trigger('stepExpandCollapse', [
+        state('collapsed', style({height: '0px', visibility: 'hidden'})),
+        state('expanded', style({height: '*', visibility: 'visible'})),
+        transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
+        //   state('center', style({height: '*', visibility:'visible'})),
+        //   state('left', style({height: 0, visibility:'hidden'})),
+        // state('right', style({height: 0, visibility:'hidden'})),
+        // transition('left => center, right => center',
+        //   animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')),
+        //   transition('* => left, * => right', animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
+          // transition('* => left, * => right, left => center, right => center', animate('5s cubic-bezier(0.35, 0, 0.25, 1)'))
+      ])
+  ],
   providers: [{provide: MdStepper, useExisting: MdVerticalStepper}]
 })
 export class MdVerticalStepper extends MdStepper { }
diff --git a/src/lib/stepper/stepper.scss b/src/lib/stepper/stepper.scss
index 409ac5a21b59..3835364345dc 100644
--- a/src/lib/stepper/stepper.scss
+++ b/src/lib/stepper/stepper.scss
@@ -5,7 +5,7 @@ $mat-label-header-height: 24px !default;
 $mat-stepper-label-min-width: 50px !default;
 $mat-stepper-side-gap: 24px !default;
 $mat-vertical-stepper-content-margin: 12px !default;
-$mat-vertical-stepper-content-padding: 16px 0 32px $mat-stepper-side-gap !default;
+$mat-vertical-content-padding-bottom: 32px !default;
 $mat-vertical-content-container-padding: 8px !default;
 $mat-connector-line-width: 1px !default;
 $mat-connector-line-gap: 8px !default;
@@ -45,6 +45,7 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
   line-height: $mat-horizontal-stepper-header-height;
   overflow: hidden;
   align-items: center;
+  outline: none;
 
   .mat-stepper-index {
     margin-right: $mat-connector-line-gap;
@@ -75,16 +76,18 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
 
 .mat-horizontal-stepper-content {
   //transition: opacity 5s $ease-in-out-curve-function;
-  transition: 5s;
-  height: inherit;
+  //height: inherit;
+  overflow: hidden;
 
   &[aria-expanded='false'] {
-    //display: none;
     height: 0;
-    overflow: hidden;
   }
 }
 
+.horizontal-content-container {
+  overflow: hidden;
+}
+
 .vertical-content-container {
   border-left-width: $mat-connector-line-width;
   border-left-style: solid;
@@ -94,21 +97,26 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
 
 .mat-vertical-stepper-content {
   padding-left: $mat-stepper-side-gap;
-  transition: transform 2s $ease-in-out-curve-function;
+  //transition: transform 2s $ease-in-out-curve-function;
   //height: inherit;
+  overflow: hidden;
 
   &[aria-expanded='false'] {
     //height: 0;
-    overflow: hidden;
-    transform: scaleY(0);
+    //overflow: hidden;
+    //transform: scaleY(0);
   }
 
   &[aria-expanded='true'] {
-    padding: $mat-vertical-stepper-content-padding;
-    transform: scaleY(1);
+    //padding: $mat-vertical-stepper-content-padding;
+    //transform: scaleY(1);
   }
 }
 
+.vertical-content {
+  padding-bottom: $mat-vertical-content-padding-bottom;
+}
+
 .mat-step {
   margin-top: $mat-connector-line-gap;
 
diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts
index 8bc22d035485..f49163fba839 100644
--- a/src/lib/stepper/stepper.ts
+++ b/src/lib/stepper/stepper.ts
@@ -16,13 +16,10 @@ import {
   // tslint:disable-next-line:no-unused-variable
   ElementRef,
   QueryList, ViewChild,
-  ElementRef,
-  QueryList,
   ViewChildren
 }from '@angular/core';
 import {MdStepLabel} from './step-label';
 
-export type MdStepContentPositionState = 'left' | 'center' | 'right';
 
 @Component({
   moduleId: module.id,
@@ -33,17 +30,6 @@ export class MdStep extends CdkStep {
   /** Content for step label given by <ng-template matStepLabel> or <ng-template mdStepLabel>. */
   @ContentChild(MdStepLabel) stepLabel: MdStepLabel;
 
-  _position: MdStepContentPositionState;
-  set position(position: number) {
-    if (position < 0) {
-      this._position = 'left';
-    } else if (position > 0) {
-      this._position = 'right';
-    } else {
-      this._position = 'center';
-    }
-  }
-
   constructor(mdStepper: MdStepper) {
     super(mdStepper);
   }

From 31e219794d67f19c2c3c12fa353c2c1e4dc41e82 Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Tue, 8 Aug 2017 15:53:18 -0700
Subject: [PATCH 3/4] Clean up unnecessary code

---
 src/cdk/stepper/stepper.ts            | 27 ++++++++++++---------------
 src/lib/stepper/stepper-vertical.html |  3 +--
 src/lib/stepper/stepper-vertical.ts   |  9 +--------
 src/lib/stepper/stepper.scss          | 15 ---------------
 src/lib/stepper/stepper.ts            |  3 ---
 5 files changed, 14 insertions(+), 43 deletions(-)

diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts
index d2da2d4dfa06..16c487059c6c 100644
--- a/src/cdk/stepper/stepper.ts
+++ b/src/cdk/stepper/stepper.ts
@@ -30,6 +30,10 @@ import {AbstractControl} from '@angular/forms';
 /** Used to generate unique ID for each stepper component. */
 let nextId = 0;
 
+/**
+ * Position state of the content of each step in horizontal stepper that is used for transitioning
+ * the content into correct position upon step selection change.
+ */
 export type CdkStepContentPositionState = 'left' | 'center' | 'right';
 
 /** Change event emitted on selection changes. */
@@ -73,7 +77,10 @@ export class CdkStep {
   @Input()
   label: string;
 
+  /** Position state of step. */
   _position: CdkStepContentPositionState;
+
+  /** Sets the CdkStepContentPositionState of step. */
   set position(position: number) {
     if (position < 0) {
       this._position = 'left';
@@ -112,8 +119,6 @@ export class CdkStepper implements AfterContentChecked {
   set linear(value: any) { this._linear = coerceBooleanProperty(value); }
   private _linear = false;
 
-  _verticalContent: ElementRef;
-
   /** The index of the selected step. */
   @Input()
   get selectedIndex() { return this._selectedIndex; }
@@ -172,18 +177,6 @@ export class CdkStepper implements AfterContentChecked {
   }
 
   private _emitStepperSelectionEvent(newIndex: number): void {
-    // if (this._verticalContent != null) {
-    //   this._verticalContent.toArray()[newIndex].nativeElement.style.height = this._verticalContent.toArray()[this._selectedIndex].nativeElement.offsetHeight+'px';
-    //   this._verticalContent.toArray()[this._selectedIndex].nativeElement.style.height = '0px';
-    //   console.log(this._verticalContent.toArray()[newIndex].nativeElement.offsetHeight);
-    // }
-
-    if (this._verticalContent != null) {
-      //console.log(this._verticalContent.nativeElement.clientHeight);
-      if (this._verticalContent.nativeElement.clientHeight) this._verticalContent.nativeElement.style.height = 0;
-      else this._verticalContent.nativeElement.height = this._verticalContent.nativeElement.scrollHeight + 'px';
-
-    }
     const stepsArray = this._steps.toArray();
     this.selectionChange.emit({
       selectedIndex: newIndex,
@@ -213,6 +206,7 @@ export class CdkStepper implements AfterContentChecked {
     event.preventDefault();
   }
 
+  /** Get whether a step has 'expanded' or 'collapsed' state for vertical stepper. */
   _getExpandedState(index: number) {
     return index == this._selectedIndex ? 'expanded' : 'collapsed';
   }
@@ -235,10 +229,13 @@ export class CdkStepper implements AfterContentChecked {
     return false;
   }
 
+  /**
+   * Set the shifted index position of each step in horizontal stepper, where zero represents
+   * the selected step.
+   */
   private _setStepPosition() {
     this._steps.forEach((step: CdkStep, index: number) => {
       step.position = index - this._selectedIndex;
     });
-    console.log('here');
   }
 }
diff --git a/src/lib/stepper/stepper-vertical.html b/src/lib/stepper/stepper-vertical.html
index b7b4ca006829..366bdbdcb148 100644
--- a/src/lib/stepper/stepper-vertical.html
+++ b/src/lib/stepper/stepper-vertical.html
@@ -20,8 +20,7 @@
 
   </div>
   <div class="vertical-content-container">
-    <div #verticalContent
-         class="mat-vertical-stepper-content" role="tabpanel"
+    <div class="mat-vertical-stepper-content" role="tabpanel"
          [@stepExpandCollapse]="_getExpandedState(i)"
          [id]="_getStepContentId(i)"
          [attr.aria-labelledby]="_getStepLabelId(i)"
diff --git a/src/lib/stepper/stepper-vertical.ts b/src/lib/stepper/stepper-vertical.ts
index d326b1871155..66175d19ac8c 100644
--- a/src/lib/stepper/stepper-vertical.ts
+++ b/src/lib/stepper/stepper-vertical.ts
@@ -24,14 +24,7 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
       trigger('stepExpandCollapse', [
         state('collapsed', style({height: '0px', visibility: 'hidden'})),
         state('expanded', style({height: '*', visibility: 'visible'})),
-        transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
-        //   state('center', style({height: '*', visibility:'visible'})),
-        //   state('left', style({height: 0, visibility:'hidden'})),
-        // state('right', style({height: 0, visibility:'hidden'})),
-        // transition('left => center, right => center',
-        //   animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')),
-        //   transition('* => left, * => right', animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
-          // transition('* => left, * => right, left => center, right => center', animate('5s cubic-bezier(0.35, 0, 0.25, 1)'))
+        transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
       ])
   ],
   providers: [{provide: MdStepper, useExisting: MdVerticalStepper}]
diff --git a/src/lib/stepper/stepper.scss b/src/lib/stepper/stepper.scss
index 3835364345dc..25a6e21d78a9 100644
--- a/src/lib/stepper/stepper.scss
+++ b/src/lib/stepper/stepper.scss
@@ -75,8 +75,6 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
 }
 
 .mat-horizontal-stepper-content {
-  //transition: opacity 5s $ease-in-out-curve-function;
-  //height: inherit;
   overflow: hidden;
 
   &[aria-expanded='false'] {
@@ -97,20 +95,7 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
 
 .mat-vertical-stepper-content {
   padding-left: $mat-stepper-side-gap;
-  //transition: transform 2s $ease-in-out-curve-function;
-  //height: inherit;
   overflow: hidden;
-
-  &[aria-expanded='false'] {
-    //height: 0;
-    //overflow: hidden;
-    //transform: scaleY(0);
-  }
-
-  &[aria-expanded='true'] {
-    //padding: $mat-vertical-stepper-content-padding;
-    //transform: scaleY(1);
-  }
 }
 
 .vertical-content {
diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts
index 88e12b73c914..5a0dd890fa89 100644
--- a/src/lib/stepper/stepper.ts
+++ b/src/lib/stepper/stepper.ts
@@ -19,7 +19,6 @@ import {
   Optional,
   QueryList,
   SkipSelf,
-  ViewChild,
   ViewChildren
 }from '@angular/core';
 import {MdStepLabel} from './step-label';
@@ -69,8 +68,6 @@ export class MdStepper extends CdkStepper implements ErrorOptions {
   /** The list of step headers of the steps in the stepper. */
   @ViewChildren('stepHeader') _stepHeader: QueryList<ElementRef>;
 
-  @ViewChild('verticalContent') _verticalContent: ElementRef;
-
   /** Steps that the stepper holds. */
   @ContentChildren(MdStep) _steps: QueryList<MdStep>;
 }

From 6346757f0a79b4cb284f0a852a9cbb7b83d8c7c0 Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Wed, 9 Aug 2017 15:33:05 -0700
Subject: [PATCH 4/4] Generalize animation so that vertical and horizontal
 steppers can use the same function

---
 src/cdk/stepper/stepper.ts              | 60 ++++++++-----------------
 src/lib/stepper/_stepper-theme.scss     |  4 +-
 src/lib/stepper/stepper-horizontal.html |  6 +--
 src/lib/stepper/stepper-horizontal.ts   | 10 ++---
 src/lib/stepper/stepper-vertical.html   |  6 +--
 src/lib/stepper/stepper-vertical.ts     |  9 ++--
 src/lib/stepper/stepper.scss            | 10 ++---
 7 files changed, 42 insertions(+), 63 deletions(-)

diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts
index 16c487059c6c..654e1c1c7c86 100644
--- a/src/cdk/stepper/stepper.ts
+++ b/src/cdk/stepper/stepper.ts
@@ -20,7 +20,7 @@ import {
   Component,
   ContentChild,
   ViewChild,
-  TemplateRef, AfterContentChecked
+  TemplateRef
 } from '@angular/core';
 import {LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE} from '@angular/cdk/keyboard';
 import {CdkStepLabel} from './step-label';
@@ -31,13 +31,13 @@ import {AbstractControl} from '@angular/forms';
 let nextId = 0;
 
 /**
- * Position state of the content of each step in horizontal stepper that is used for transitioning
+ * Position state of the content of each step in stepper that is used for transitioning
  * the content into correct position upon step selection change.
  */
-export type CdkStepContentPositionState = 'left' | 'center' | 'right';
+export type StepContentPositionState = 'previous' | 'current' | 'next';
 
 /** Change event emitted on selection changes. */
-export class CdkStepperSelectionEvent {
+export class StepperSelectionEvent {
   /** Index of the step now selected. */
   selectedIndex: number;
 
@@ -77,20 +77,6 @@ export class CdkStep {
   @Input()
   label: string;
 
-  /** Position state of step. */
-  _position: CdkStepContentPositionState;
-
-  /** Sets the CdkStepContentPositionState of step. */
-  set position(position: number) {
-    if (position < 0) {
-      this._position = 'left';
-    } else if (position > 0) {
-      this._position = 'right';
-    } else {
-      this._position = 'center';
-    }
-  }
-
   constructor(private _stepper: CdkStepper) { }
 
   /** Selects this step component. */
@@ -106,7 +92,7 @@ export class CdkStep {
     '(keydown)': '_onKeydown($event)'
   },
 })
-export class CdkStepper implements AfterContentChecked {
+export class CdkStepper {
   /** The list of step components that the stepper is holding. */
   @ContentChildren(CdkStep) _steps: QueryList<CdkStep>;
 
@@ -126,7 +112,6 @@ export class CdkStepper implements AfterContentChecked {
     if (this._selectedIndex != index && !this._anyControlsInvalid(index)) {
       this._emitStepperSelectionEvent(index);
       this._focusStep(this._selectedIndex);
-      this._setStepPosition();
     }
   }
   private _selectedIndex: number = 0;
@@ -140,7 +125,7 @@ export class CdkStepper implements AfterContentChecked {
   }
 
   /** Event emitted when the selected step has changed. */
-  @Output() selectionChange = new EventEmitter<CdkStepperSelectionEvent>();
+  @Output() selectionChange = new EventEmitter<StepperSelectionEvent>();
 
   /** The index of the step that the focus can be set. */
   _focusIndex: number = 0;
@@ -152,10 +137,6 @@ export class CdkStepper implements AfterContentChecked {
     this._groupId = nextId++;
   }
 
-  ngAfterContentChecked(): void {
-    this._setStepPosition();
-  }
-
   /** Selects and focuses the next step in list. */
   next(): void {
     this.selectedIndex = Math.min(this._selectedIndex + 1, this._steps.length - 1);
@@ -171,11 +152,23 @@ export class CdkStepper implements AfterContentChecked {
     return `mat-step-label-${this._groupId}-${i}`;
   }
 
-  /** Returns nique id for each step content element. */
+  /** Returns unique id for each step content element. */
   _getStepContentId(i: number): string {
     return `mat-step-content-${this._groupId}-${i}`;
   }
 
+  /** Returns position state of the step with the given index. */
+  _getAnimationDirection(index: number): StepContentPositionState {
+    const position = index - this._selectedIndex;
+    if (position < 0) {
+      return 'previous';
+    } else if (position > 0) {
+      return 'next';
+    } else {
+      return 'current';
+    }
+  }
+
   private _emitStepperSelectionEvent(newIndex: number): void {
     const stepsArray = this._steps.toArray();
     this.selectionChange.emit({
@@ -206,11 +199,6 @@ export class CdkStepper implements AfterContentChecked {
     event.preventDefault();
   }
 
-  /** Get whether a step has 'expanded' or 'collapsed' state for vertical stepper. */
-  _getExpandedState(index: number) {
-    return index == this._selectedIndex ? 'expanded' : 'collapsed';
-  }
-
   private _focusStep(index: number) {
     this._focusIndex = index;
     this._stepHeader.toArray()[this._focusIndex].nativeElement.focus();
@@ -228,14 +216,4 @@ export class CdkStepper implements AfterContentChecked {
     }
     return false;
   }
-
-  /**
-   * Set the shifted index position of each step in horizontal stepper, where zero represents
-   * the selected step.
-   */
-  private _setStepPosition() {
-    this._steps.forEach((step: CdkStep, index: number) => {
-      step.position = index - this._selectedIndex;
-    });
-  }
 }
diff --git a/src/lib/stepper/_stepper-theme.scss b/src/lib/stepper/_stepper-theme.scss
index a55c82c7abbf..4f72d6ab0f48 100644
--- a/src/lib/stepper/_stepper-theme.scss
+++ b/src/lib/stepper/_stepper-theme.scss
@@ -33,11 +33,11 @@
     background-color: mat-color($background, card);
   }
 
-  .vertical-content-container {
+  .mat-vertical-content-container {
     border-left-color: mat-color($foreground, divider);
   }
 
-  .connector-line {
+  .mat-connector-line {
     border-top-color: mat-color($foreground, divider);
   }
 }
diff --git a/src/lib/stepper/stepper-horizontal.html b/src/lib/stepper/stepper-horizontal.html
index 0ea15e6023a7..0eade60c9f35 100644
--- a/src/lib/stepper/stepper-horizontal.html
+++ b/src/lib/stepper/stepper-horizontal.html
@@ -21,13 +21,13 @@
       </div>
     </div>
 
-    <div *ngIf="!isLast" class="connector-line"></div>
+    <div *ngIf="!isLast" class="mat-connector-line"></div>
   </ng-container>
 </div>
-<div class="horizontal-content-container">
+<div class="mat-horizontal-content-container">
   <div *ngFor="let step of _steps; let i = index"
        class="mat-horizontal-stepper-content" role="tabpanel"
-       [@stepEnterExit]="step._position"
+       [@stepTransition]="_getAnimationDirection(i)"
        [id]="_getStepContentId(i)"
        [attr.aria-labelledby]="_getStepLabelId(i)"
        [attr.aria-expanded]="selectedIndex == i">
diff --git a/src/lib/stepper/stepper-horizontal.ts b/src/lib/stepper/stepper-horizontal.ts
index c7b6a02859fb..dbccf06a60c8 100644
--- a/src/lib/stepper/stepper-horizontal.ts
+++ b/src/lib/stepper/stepper-horizontal.ts
@@ -21,11 +21,11 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
     'role': 'tablist',
   },
   animations: [
-    trigger('stepEnterExit', [
-      state('left', style({transform: 'translate3d(-100%, 0, 0)'})),
-      state('center', style({transform: 'translate3d(0%, 0, 0)'})),
-      state('right', style({transform: 'translate3d(100%, 0, 0)'})),
-      transition('* => left, * => right, left => center, right => center',
+    trigger('stepTransition', [
+      state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
+      state('current', style({transform: 'translate3d(0%, 0, 0)', visibility: 'visible'})),
+      state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
+      transition('* => *',
           animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
     ])
   ],
diff --git a/src/lib/stepper/stepper-vertical.html b/src/lib/stepper/stepper-vertical.html
index 366bdbdcb148..8efe7a283932 100644
--- a/src/lib/stepper/stepper-vertical.html
+++ b/src/lib/stepper/stepper-vertical.html
@@ -19,13 +19,13 @@
     </div>
 
   </div>
-  <div class="vertical-content-container">
+  <div class="mat-vertical-content-container">
     <div class="mat-vertical-stepper-content" role="tabpanel"
-         [@stepExpandCollapse]="_getExpandedState(i)"
+         [@stepTransition]="_getAnimationDirection(i)"
          [id]="_getStepContentId(i)"
          [attr.aria-labelledby]="_getStepLabelId(i)"
          [attr.aria-expanded]="selectedIndex == i">
-      <div class="vertical-content">
+      <div class="mat-vertical-content">
         <ng-container[ngTemplateOutlet]="step.content"></ng-container>
       </div>
     </div>
diff --git a/src/lib/stepper/stepper-vertical.ts b/src/lib/stepper/stepper-vertical.ts
index 66175d19ac8c..b72349db888c 100644
--- a/src/lib/stepper/stepper-vertical.ts
+++ b/src/lib/stepper/stepper-vertical.ts
@@ -21,10 +21,11 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
     'role': 'tablist',
   },
   animations: [
-      trigger('stepExpandCollapse', [
-        state('collapsed', style({height: '0px', visibility: 'hidden'})),
-        state('expanded', style({height: '*', visibility: 'visible'})),
-        transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+      trigger('stepTransition', [
+        state('previous', style({height: '0px', visibility: 'hidden'})),
+        state('next', style({height: '0px', visibility: 'hidden'})),
+        state('current', style({height: '*', visibility: 'visible'})),
+        transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
       ])
   ],
   providers: [{provide: MdStepper, useExisting: MdVerticalStepper}]
diff --git a/src/lib/stepper/stepper.scss b/src/lib/stepper/stepper.scss
index 25a6e21d78a9..25a58bcd490d 100644
--- a/src/lib/stepper/stepper.scss
+++ b/src/lib/stepper/stepper.scss
@@ -65,7 +65,7 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
   }
 }
 
-.connector-line {
+.mat-connector-line {
   border-top-width: $mat-connector-line-width;
   border-top-style: solid;
   width: $mat-horizontal-connector-line-size;
@@ -82,11 +82,11 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
   }
 }
 
-.horizontal-content-container {
+.mat-horizontal-content-container {
   overflow: hidden;
 }
 
-.vertical-content-container {
+.mat-vertical-content-container {
   border-left-width: $mat-connector-line-width;
   border-left-style: solid;
   margin-left: $mat-vertical-stepper-content-margin;
@@ -98,7 +98,7 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
   overflow: hidden;
 }
 
-.vertical-content {
+.mat-vertical-content {
   padding-bottom: $mat-vertical-content-padding-bottom;
 }
 
@@ -106,7 +106,7 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
   margin-top: $mat-connector-line-gap;
 
   &:last-child {
-    .vertical-content-container {
+    .mat-vertical-content-container {
       border: none;
     }
   }