Skip to content

Commit 9a8d136

Browse files
authored
fix(material/tabs): flicker when animationDuration is set to zero (#30966) (#30968)
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 278f29e commit 9a8d136

File tree

3 files changed

+12
-4
lines changed

3 files changed

+12
-4
lines changed

goldens/material/tabs/index.api.md

Lines changed: 1 addition & 1 deletion
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-
_animationMode: "NoopAnimations" | "BrowserAnimations" | null;
250+
protected _animationsDisabled(): boolean;
251251
ariaLabel: string;
252252
ariaLabelledby: string;
253253
// @deprecated

src/material/tabs/tab-group.html

Lines changed: 1 addition & 1 deletion
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]="_animationMode === 'NoopAnimations'"
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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@ export class MatTabGroup
100100
private _tabsSubscription = Subscription.EMPTY;
101101
private _tabLabelSubscription = Subscription.EMPTY;
102102
private _tabBodySubscription = Subscription.EMPTY;
103-
104-
_animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
103+
private _diAnimationsDisabled =
104+
inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations';
105105

106106
/**
107107
* All tabs inside the tab group. This includes tabs that belong to groups that are nested
@@ -578,6 +578,14 @@ export class MatTabGroup
578578
this._tabBodies?.forEach((body, i) => body._setActiveClass(i === this._selectedIndex));
579579
}
580580
}
581+
582+
protected _animationsDisabled(): boolean {
583+
return (
584+
this._diAnimationsDisabled ||
585+
this.animationDuration === '0' ||
586+
this.animationDuration === '0ms'
587+
);
588+
}
581589
}
582590

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

0 commit comments

Comments
 (0)