feat(material/stepper): add animationDuration input

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 steps; 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.spec.ts

@@ -855,6 +855,14 @@ describe('MatStepper', () => {
 
       expect(headerRipples.every(ripple => ripple.disabled)).toBe(true);
     });
+
+    it('should set default animation duration for vertical stepper to 225ms', () => {
+      const fixture = createComponent(SimpleMatVerticalStepperApp);
+      fixture.detectChanges();
+
+      const stepper = fixture.debugElement.query(By.css('mat-vertical-stepper'))!.componentInstance;
+      expect(stepper.animationDuration).toBe('225ms');
+    });
   });
 
   describe('horizontal stepper', () => {
@@ -912,6 +920,15 @@ describe('MatStepper', () => {
 
       expect(headerRipples.every(ripple => ripple.disabled)).toBe(true);
     });
+
+    it('should set default animation duration for horizontal stepper to 500ms', () => {
+      const fixture = createComponent(SimpleMatHorizontalStepperApp);
+      fixture.detectChanges();
+
+      const stepper = fixture.debugElement.query(By.css('mat-horizontal-stepper'))!
+          .componentInstance;
+      expect(stepper.animationDuration).toBe('500ms');
+    });
   });
 
   describe('linear stepper with valid step', () => {

src/material/stepper/stepper.ts

@@ -101,6 +101,17 @@ export class MatStepper extends CdkStepper implements AfterContentInit {
   /** Consumer-specified template-refs to be used to override the header icons. */
   _iconOverrides: {[key: string]: TemplateRef<MatStepperIconContext>} = {};
 
+
+  /** Duration for the stepper 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: string = '500ms';
+
   /** Stream of animation `done` events when the body expands/collapses. */
   _animationDone = new Subject<AnimationEvent>();
 
@@ -181,5 +192,6 @@ export class MatVerticalStepper extends MatStepper {
     @Inject(DOCUMENT) _document?: any) {
     super(dir, changeDetectorRef, elementRef, _document);
     this._orientation = 'vertical';
+    this.animationDuration = '225ms';
   }
 }

tools/public_api_guard/material/stepper.d.ts

@@ -51,6 +51,7 @@ export declare class MatStepper extends CdkStepper implements AfterContentInit {
     _stepHeader: QueryList<MatStepHeader>;
     _steps: QueryList<MatStep>;
     readonly animationDone: EventEmitter<void>;
+    animationDuration: string;
     disableRipple: boolean;
     ngAfterContentInit(): void;
 }