feat(stepper): add input for controlling the animation duration

Adds a new input called `animationDuration` that allows users to control the animation duration of a stepper, similarly to other components.

Fixes #17130.

Author: crisbeto

src/components-examples/material/stepper/index.ts

@@ -13,6 +13,7 @@ import {StepperOptionalExample} from './stepper-optional/stepper-optional-exampl
 import {StepperOverviewExample} from './stepper-overview/stepper-overview-example';
 import {StepperStatesExample} from './stepper-states/stepper-states-example';
 import {StepperVerticalExample} from './stepper-vertical/stepper-vertical-example';
+import {StepperAnimationsExample} from './stepper-animations/stepper-animations-example';
 
 export {
   StepperEditableExample,
@@ -22,6 +23,7 @@ export {
   StepperOverviewExample,
   StepperStatesExample,
   StepperVerticalExample,
+  StepperAnimationsExample,
 };
 
 const EXAMPLES = [
@@ -32,6 +34,7 @@ const EXAMPLES = [
   StepperOverviewExample,
   StepperStatesExample,
   StepperVerticalExample,
+  StepperAnimationsExample,
 ];
 
 @NgModule({

src/material-examples/material/stepper/stepper-animations/stepper-animations-example.css

@@ -0,0 +1,7 @@
+.example-input-wrapper {
+  margin-bottom: 16px;
+}
+
+label {
+  margin-right: 4px;
+}

src/material-examples/material/stepper/stepper-animations/stepper-animations-example.html

@@ -0,0 +1,38 @@
+<div class="example-input-wrapper">
+  <label for="duration">Animation duration:</label>
+  <input id="duration" value="2000" type="number" min="0" step="100" #duration>
+</div>
+
+<mat-vertical-stepper [linear]="false" #stepper [animationDuration]="duration.value">
+  <mat-step [stepControl]="firstFormGroup">
+    <form [formGroup]="firstFormGroup">
+      <ng-template matStepLabel>Fill out your name</ng-template>
+      <mat-form-field>
+        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step [stepControl]="secondFormGroup">
+    <form [formGroup]="secondFormGroup">
+      <ng-template matStepLabel>Fill out your address</ng-template>
+      <mat-form-field>
+        <input matInput placeholder="Address" formControlName="secondCtrl" required>
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperPrevious>Back</button>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step>
+    <ng-template matStepLabel>Done</ng-template>
+    You are now done.
+    <div>
+      <button mat-button matStepperPrevious>Back</button>
+      <button mat-button (click)="stepper.reset()">Reset</button>
+    </div>
+  </mat-step>
+</mat-vertical-stepper>

src/material-examples/material/stepper/stepper-animations/stepper-animations-example.ts

@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+import {FormBuilder, FormGroup} from '@angular/forms';
+
+/**
+ * @title Stepper animations
+ */
+@Component({
+  selector: 'stepper-animations-example',
+  templateUrl: 'stepper-animations-example.html',
+  styleUrls: ['stepper-animations-example.css'],
+})
+export class StepperAnimationsExample {
+  constructor(private _formBuilder: FormBuilder) {}
+  firstFormGroup: FormGroup = this._formBuilder.group({firstCtrl: ['']});
+  secondFormGroup: FormGroup = this._formBuilder.group({secondCtrl: ['']});
+}

src/material/stepper/stepper-animations.ts

@@ -27,14 +27,14 @@ export const matStepperAnimations: {
     state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
     state('current', style({transform: 'none', visibility: 'visible'})),
     state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
-    transition('* => *', animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
+    transition('* => *', animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'))
   ]),
 
   /** Animation that transitions the step along the Y axis in a vertical stepper. */
   verticalStepTransition: 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)'))
+    transition('* <=> current', animate('{{animationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)'))
   ])
 };

src/material/stepper/stepper-horizontal.html

@@ -29,7 +29,10 @@
   <div *ngFor="let step of _stepsArray; let i = index"
        [attr.tabindex]="selectedIndex === i ? 0 : null"
        class="mat-horizontal-stepper-content" role="tabpanel"
-       [@stepTransition]="_getAnimationDirection(i)"
+       [@stepTransition]="{
+         value: _getAnimationDirection(i),
+         params: {animationDuration: animationDuration}
+       }"
        (@stepTransition.done)="_animationDone.next($event)"
        [id]="_getStepContentId(i)"
        [attr.aria-labelledby]="_getStepLabelId(i)"

src/material/stepper/stepper-vertical.html

@@ -24,7 +24,10 @@
   <div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">
     <div class="mat-vertical-stepper-content" role="tabpanel"
          [attr.tabindex]="selectedIndex === i ? 0 : null"
-         [@stepTransition]="_getAnimationDirection(i)"
+         [@stepTransition]="{
+            value: _getAnimationDirection(i),
+            params: {animationDuration: animationDuration}
+          }"
          (@stepTransition.done)="_animationDone.next($event)"
          [id]="_getStepContentId(i)"
          [attr.aria-labelledby]="_getStepLabelId(i)"

src/material/stepper/stepper.md

@@ -163,6 +163,12 @@ by placing a `matStepperIcon` for each of the icons that you want to override. T
 
 Note that you aren't limited to using the `mat-icon` component when providing custom icons.
 
+### Controlling the stepper animation
+You can control the duration of the stepper's animation using the `animationDuration` input. If you
+want to disable the animation completely, you can do so by setting the properties to `0ms`.
+
+<!-- example(stepper-animations) -->
+
 #### Step States
 You can set the state of a step to whatever you want. The given state by default maps to an icon.
 However, it can be overridden the same way as mentioned above.

src/material/stepper/stepper.spec.ts

@@ -394,6 +394,14 @@ describe('MatStepper', () => {
       expect(secondStepContentEl.getAttribute('tabindex')).toBe('0');
     });
 
+    it('should add units to unit-less values passed in to animationDuration', () => {
+      const stepperComponent: MatStepper =
+          fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
+
+      stepperComponent.animationDuration = '1337';
+      expect(stepperComponent.animationDuration).toBe('1337ms');
+    });
+
   });
 
   describe('basic stepper when attempting to set the selected step too early', () => {

src/material/stepper/stepper.ts

@@ -105,6 +105,14 @@ export class MatStepper extends CdkStepper implements AfterContentInit {
   /** Whether ripples should be disabled for the step headers. */
   @Input() disableRipple: boolean;
 
+  /** Duration for the animation. Will be normalized to milliseconds if no units are set. */
+  @Input()
+  get animationDuration(): string { return this._animationDuration; }
+  set animationDuration(value: string) {
+    this._animationDuration = /^\d+$/.test(value) ? value + 'ms' : value;
+  }
+  private _animationDuration = '500ms';
+
   /** Consumer-specified template-refs to be used to override the header icons. */
   _iconOverrides: {[key: string]: TemplateRef<MatStepperIconContext>} = {};
 
@@ -204,6 +212,7 @@ export class MatVerticalStepper extends MatStepper {
     @Inject(DOCUMENT) _document?: any) {
     super(dir, changeDetectorRef, elementRef, _document);
     this._orientation = 'vertical';
+    this.animationDuration = '225ms';
   }
 
   static ngAcceptInputType_editable: boolean | string | null | undefined;