Skip to content

Commit b20a85a

Browse files
crisbetocrisbeto
committedFeb 3, 2025
fix(material/tabs): remove remaining animation dependencies
Removes the remaning dependencies on `@angular/animations` from the package.
·
20.0.0-next.619.2.0-next.3
1 parent 8723307 commit b20a85a

File tree

3 files changed

+132
-54
lines changed

3 files changed

+132
-54
lines changed
 

‎src/material/tabs/BUILD.bazel

-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ ng_module(
3636
"//src/cdk/portal",
3737
"//src/cdk/scrolling",
3838
"//src/material/core",
39-
"@npm//@angular/animations",
4039
"@npm//@angular/common",
4140
"@npm//@angular/core",
4241
],

‎src/material/tabs/tabs-animations.ts

+131-51
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,6 @@
55
* Use of this source code is governed by an MIT-style license that can be
66
* found in the LICENSE file at https://angular.dev/license
77
*/
8-
import {
9-
AnimationTriggerMetadata,
10-
animate,
11-
state,
12-
style,
13-
transition,
14-
trigger,
15-
} from '@angular/animations';
168

179
/**
1810
* Animations used by the Material tabs.
@@ -21,51 +13,139 @@ import {
2113
* @breaking-change 21.0.0.
2214
*/
2315
export const matTabsAnimations: {
24-
readonly translateTab: AnimationTriggerMetadata;
16+
readonly translateTab: any;
2517
} = {
26-
/** Animation translates a tab along the X axis. */
27-
translateTab: trigger('translateTab', [
28-
// Transitions to `none` instead of 0, because some browsers might blur the content.
29-
state(
30-
'center, void, left-origin-center, right-origin-center',
31-
style({transform: 'none', visibility: 'visible'}),
32-
),
18+
// Represents:
19+
// trigger('translateTab', [
20+
// // Transitions to `none` instead of 0, because some browsers might blur the content.
21+
// state(
22+
// 'center, void, left-origin-center, right-origin-center',
23+
// style({transform: 'none', visibility: 'visible'}),
24+
// ),
25+
26+
// // If the tab is either on the left or right, we additionally add a `min-height` of 1px
27+
// // in order to ensure that the element has a height before its state changes. This is
28+
// // necessary because Chrome does seem to skip the transition in RTL mode if the element does
29+
// // not have a static height and is not rendered. See related issue: #9465
30+
// state(
31+
// 'left',
32+
// style({
33+
// transform: 'translate3d(-100%, 0, 0)',
34+
// minHeight: '1px',
3335

34-
// If the tab is either on the left or right, we additionally add a `min-height` of 1px
35-
// in order to ensure that the element has a height before its state changes. This is
36-
// necessary because Chrome does seem to skip the transition in RTL mode if the element does
37-
// not have a static height and is not rendered. See related issue: #9465
38-
state(
39-
'left',
40-
style({
41-
transform: 'translate3d(-100%, 0, 0)',
42-
minHeight: '1px',
36+
// // Normally this is redundant since we detach the content from the DOM, but if the user
37+
// // opted into keeping the content in the DOM, we have to hide it so it isn't focusable.
38+
// visibility: 'hidden',
39+
// }),
40+
// ),
41+
// state(
42+
// 'right',
43+
// style({
44+
// transform: 'translate3d(100%, 0, 0)',
45+
// minHeight: '1px',
46+
// visibility: 'hidden',
47+
// }),
48+
// ),
4349

44-
// Normally this is redundant since we detach the content from the DOM, but if the user
45-
// opted into keeping the content in the DOM, we have to hide it so it isn't focusable.
46-
visibility: 'hidden',
47-
}),
48-
),
49-
state(
50-
'right',
51-
style({
52-
transform: 'translate3d(100%, 0, 0)',
53-
minHeight: '1px',
54-
visibility: 'hidden',
55-
}),
56-
),
50+
// transition(
51+
// '* => left, * => right, left => center, right => center',
52+
// animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
53+
// ),
54+
// transition('void => left-origin-center', [
55+
// style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'}),
56+
// animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
57+
// ]),
58+
// transition('void => right-origin-center', [
59+
// style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'}),
60+
// animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
61+
// ]),
62+
// ])
5763

58-
transition(
59-
'* => left, * => right, left => center, right => center',
60-
animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
61-
),
62-
transition('void => left-origin-center', [
63-
style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'}),
64-
animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
65-
]),
66-
transition('void => right-origin-center', [
67-
style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'}),
68-
animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
69-
]),
70-
]),
64+
/** Animation translates a tab along the X axis. */
65+
translateTab: {
66+
type: 7,
67+
name: 'translateTab',
68+
definitions: [
69+
{
70+
type: 0,
71+
name: 'center, void, left-origin-center, right-origin-center',
72+
styles: {
73+
type: 6,
74+
styles: {transform: 'none', visibility: 'visible'},
75+
offset: null,
76+
},
77+
},
78+
{
79+
type: 0,
80+
name: 'left',
81+
styles: {
82+
type: 6,
83+
styles: {
84+
transform: 'translate3d(-100%, 0, 0)',
85+
minHeight: '1px',
86+
visibility: 'hidden',
87+
},
88+
offset: null,
89+
},
90+
},
91+
{
92+
type: 0,
93+
name: 'right',
94+
styles: {
95+
type: 6,
96+
styles: {
97+
transform: 'translate3d(100%, 0, 0)',
98+
minHeight: '1px',
99+
visibility: 'hidden',
100+
},
101+
offset: null,
102+
},
103+
},
104+
{
105+
type: 1,
106+
expr: '* => left, * => right, left => center, right => center',
107+
animation: {
108+
type: 4,
109+
styles: null,
110+
timings: '{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)',
111+
},
112+
options: null,
113+
},
114+
{
115+
type: 1,
116+
expr: 'void => left-origin-center',
117+
animation: [
118+
{
119+
type: 6,
120+
styles: {transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'},
121+
offset: null,
122+
},
123+
{
124+
type: 4,
125+
styles: null,
126+
timings: '{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)',
127+
},
128+
],
129+
options: null,
130+
},
131+
{
132+
type: 1,
133+
expr: 'void => right-origin-center',
134+
animation: [
135+
{
136+
type: 6,
137+
styles: {transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'},
138+
offset: null,
139+
},
140+
{
141+
type: 4,
142+
styles: null,
143+
timings: '{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)',
144+
},
145+
],
146+
options: null,
147+
},
148+
],
149+
options: {},
150+
},
71151
};

‎tools/public_api_guard/material/tabs.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
import { AfterContentChecked } from '@angular/core';
88
import { AfterContentInit } from '@angular/core';
99
import { AfterViewInit } from '@angular/core';
10-
import { AnimationTriggerMetadata } from '@angular/animations';
1110
import { BehaviorSubject } from 'rxjs';
1211
import { CdkPortal } from '@angular/cdk/portal';
1312
import { CdkPortalOutlet } from '@angular/cdk/portal';
@@ -507,7 +506,7 @@ export class MatTabNavPanel {
507506

508507
// @public @deprecated
509508
export const matTabsAnimations: {
510-
readonly translateTab: AnimationTriggerMetadata;
509+
readonly translateTab: any;
511510
};
512511

513512
// @public

0 commit comments

Comments
 (0)
Please sign in to comment.