Skip to content

Commit c63b1fe

Browse files
authored
fix(material/tabs): flicker when animationDuration is set to zero (#30966)
The tabs have a fallback that sets `transition-delay: 1ms` in case users disabled animations without going through one of our APIs. That was also applying when they set `animationDuration="0"` which is a supported API. The result was a slight flicker. These changes resolve the flicker by treating `animationDuration="0"` in the same way as if animations were disabled globally. Fixes #30964.
1 parent 0f48b04 commit c63b1fe

File tree

3 files changed

+11
-4
lines changed

3 files changed

+11
-4
lines changed

goldens/material/tabs/index.api.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ export class MatTabGroup implements AfterViewInit, AfterContentInit, AfterConten
247247
get animationDuration(): string;
248248
set animationDuration(value: string | number);
249249
// (undocumented)
250-
_animationsDisabled: boolean;
250+
protected _animationsDisabled(): boolean;
251251
ariaLabel: string;
252252
ariaLabelledby: string;
253253
// @deprecated

src/material/tabs/tab-group.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565

6666
<div
6767
class="mat-mdc-tab-body-wrapper"
68-
[class._mat-animation-noopable]="_animationsDisabled"
68+
[class._mat-animation-noopable]="_animationsDisabled()"
6969
#tabBodyWrapper>
7070
@for (tab of _tabs; track tab;) {
7171
<mat-tab-body role="tabpanel"

src/material/tabs/tab-group.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,7 @@ export class MatTabGroup
9999
private _tabsSubscription = Subscription.EMPTY;
100100
private _tabLabelSubscription = Subscription.EMPTY;
101101
private _tabBodySubscription = Subscription.EMPTY;
102-
103-
_animationsDisabled = _animationsDisabled();
102+
private _diAnimationsDisabled = _animationsDisabled();
104103

105104
/**
106105
* All tabs inside the tab group. This includes tabs that belong to groups that are nested
@@ -577,6 +576,14 @@ export class MatTabGroup
577576
this._tabBodies?.forEach((body, i) => body._setActiveClass(i === this._selectedIndex));
578577
}
579578
}
579+
580+
protected _animationsDisabled(): boolean {
581+
return (
582+
this._diAnimationsDisabled ||
583+
this.animationDuration === '0' ||
584+
this.animationDuration === '0ms'
585+
);
586+
}
580587
}
581588

582589
/** A simple change event emitted on focus or selection changes. */

0 commit comments

Comments
 (0)