From 0be0e43a765b9904c3f552519433c451729640d4 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 28 Apr 2025 14:41:37 +0200
Subject: [PATCH] fix(material/tabs): flicker when animationDuration is set to
 zero

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.
---
 goldens/material/tabs/index.api.md |  2 +-
 src/material/tabs/tab-group.html   |  2 +-
 src/material/tabs/tab-group.ts     | 11 +++++++++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/goldens/material/tabs/index.api.md b/goldens/material/tabs/index.api.md
index abe762fdddd8..27b38e5a595d 100644
--- a/goldens/material/tabs/index.api.md
+++ b/goldens/material/tabs/index.api.md
@@ -247,7 +247,7 @@ export class MatTabGroup implements AfterViewInit, AfterContentInit, AfterConten
     get animationDuration(): string;
     set animationDuration(value: string | number);
     // (undocumented)
-    _animationsDisabled: boolean;
+    protected _animationsDisabled(): boolean;
     ariaLabel: string;
     ariaLabelledby: string;
     // @deprecated
diff --git a/src/material/tabs/tab-group.html b/src/material/tabs/tab-group.html
index 82c1332427a4..2db906b31bfb 100644
--- a/src/material/tabs/tab-group.html
+++ b/src/material/tabs/tab-group.html
@@ -65,7 +65,7 @@
 
 <div
   class="mat-mdc-tab-body-wrapper"
-  [class._mat-animation-noopable]="_animationsDisabled"
+  [class._mat-animation-noopable]="_animationsDisabled()"
   #tabBodyWrapper>
   @for (tab of _tabs; track tab;) {
     <mat-tab-body role="tabpanel"
diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts
index c71f872f5245..1d561907b607 100644
--- a/src/material/tabs/tab-group.ts
+++ b/src/material/tabs/tab-group.ts
@@ -99,8 +99,7 @@ export class MatTabGroup
   private _tabsSubscription = Subscription.EMPTY;
   private _tabLabelSubscription = Subscription.EMPTY;
   private _tabBodySubscription = Subscription.EMPTY;
-
-  _animationsDisabled = _animationsDisabled();
+  private _diAnimationsDisabled = _animationsDisabled();
 
   /**
    * All tabs inside the tab group. This includes tabs that belong to groups that are nested
@@ -577,6 +576,14 @@ export class MatTabGroup
       this._tabBodies?.forEach((body, i) => body._setActiveClass(i === this._selectedIndex));
     }
   }
+
+  protected _animationsDisabled(): boolean {
+    return (
+      this._diAnimationsDisabled ||
+      this.animationDuration === '0' ||
+      this.animationDuration === '0ms'
+    );
+  }
 }
 
 /** A simple change event emitted on focus or selection changes. */