diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts
index 9d487787e7ae..d64ccd2fae9a 100644
--- a/src/lib/tabs/tab-body.ts
+++ b/src/lib/tabs/tab-body.ts
@@ -146,6 +146,11 @@ export class MatTabBody implements OnInit, OnDestroy {
/** Position that will be used when the tab is immediately becoming visible after creation. */
@Input() origin: number;
+ // Note that the default value will always be overwritten by `MatTabBody`, but we need one
+ // anyway to prevent the animations module from throwing an error if the body is used on its own.
+ /** Duration for the tab's animation. */
+ @Input() animationDuration: string = '500ms';
+
/** The shifted index position of the tab body, where zero represents the active center tab. */
@Input()
set position(position: number) {
diff --git a/src/lib/tabs/tab-group.html b/src/lib/tabs/tab-group.html
index 1e730c837d8c..a72e9451a471 100644
--- a/src/lib/tabs/tab-group.html
+++ b/src/lib/tabs/tab-group.html
@@ -40,6 +40,7 @@
[content]="tab.content"
[position]="tab.position"
[origin]="tab.origin"
+ [animationDuration]="animationDuration"
(_onCentered)="_removeTabBodyWrapperHeight()"
(_onCentering)="_setTabBodyWrapperHeight($event)">
diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts
index 0d1303c8feb4..d7b9ac4cf5df 100644
--- a/src/lib/tabs/tab-group.ts
+++ b/src/lib/tabs/tab-group.ts
@@ -22,6 +22,9 @@ import {
QueryList,
ViewChild,
ViewEncapsulation,
+ InjectionToken,
+ Inject,
+ Optional,
} from '@angular/core';
import {
CanColor,
@@ -51,6 +54,15 @@ export class MatTabChangeEvent {
/** Possible positions for the tab header. */
export type MatTabHeaderPosition = 'above' | 'below';
+/** Object that can be used to configure the default options for the tabs module. */
+export interface MatTabsConfig {
+ /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */
+ animationDuration?: string;
+}
+
+/** Injection token that can be used to provide the default options the tabs module. */
+export const MAT_TABS_CONFIG = new InjectionToken('MAT_TABS_CONFIG');
+
// Boilerplate for applying mixins to MatTabGroup.
/** @docs-private */
export class MatTabGroupBase {
@@ -117,6 +129,9 @@ 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;
+
/** Background color of the tab group. */
@Input()
get backgroundColor(): ThemePalette { return this._backgroundColor; }
@@ -150,9 +165,12 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
private _groupId: number;
constructor(elementRef: ElementRef,
- private _changeDetectorRef: ChangeDetectorRef) {
+ private _changeDetectorRef: ChangeDetectorRef,
+ @Inject(MAT_TABS_CONFIG) @Optional() defaultConfig?: MatTabsConfig) {
super(elementRef);
this._groupId = nextId++;
+ this.animationDuration = defaultConfig && defaultConfig.animationDuration ?
+ defaultConfig.animationDuration : '500ms';
}
/**
diff --git a/src/lib/tabs/tabs-animations.ts b/src/lib/tabs/tabs-animations.ts
index d11cc7f917be..490b0f7b0a3c 100644
--- a/src/lib/tabs/tabs-animations.ts
+++ b/src/lib/tabs/tabs-animations.ts
@@ -34,14 +34,14 @@ export const matTabsAnimations: {
state('right', style({transform: 'translate3d(100%, 0, 0)', minHeight: '1px'})),
transition('* => left, * => right, left => center, right => center',
- animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')),
+ animate('{{animationDuration}} 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)')
+ animate('{{animationDuration}} 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('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)')
])
])
};
diff --git a/src/lib/tabs/tabs.md b/src/lib/tabs/tabs.md
index 930b15738232..a180b28e7439 100644
--- a/src/lib/tabs/tabs.md
+++ b/src/lib/tabs/tabs.md
@@ -114,6 +114,13 @@ do so using the `[mat-align-tabs]` attribute.
+### Controlling the tab animation
+You can control the duration of the tabs' animation using the `animationDuration` input. If you
+want to disable the animation completely, you can do so by setting the properties to `0ms`. The
+duration can be configured globally using the `MAT_TABS_CONFIG` injection token.
+
+
+
### Accessibility
Tabs without text or labels should be given a meaningful label via `aria-label` or
`aria-labelledby`. For `MatTabNav`, the `