70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
|
/**
|
||
|
|
* @license
|
||
|
|
* Copyright Google LLC All Rights Reserved.
|
||
|
|
*
|
||
|
|
* Use of this source code is governed by an MIT-style license that can be
|
||
|
|
* found in the LICENSE file at https://angular.dev/license
|
||
|
|
*/
|
||
|
|
import {
|
||
|
|
AnimationTriggerMetadata,
|
||
|
|
animate,
|
||
|
|
state,
|
||
|
|
style,
|
||
|
|
transition,
|
||
|
|
trigger,
|
||
|
|
} from '@angular/animations';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Animations used by the Material tabs.
|
||
|
|
* @docs-private
|
||
|
|
*/
|
||
|
|
export const matTabsAnimations: {
|
||
|
|
readonly translateTab: AnimationTriggerMetadata;
|
||
|
|
} = {
|
||
|
|
/** Animation translates a tab along the X axis. */
|
||
|
|
translateTab: trigger('translateTab', [
|
||
|
|
// Transitions to `none` instead of 0, because some browsers might blur the content.
|
||
|
|
state(
|
||
|
|
'center, void, left-origin-center, right-origin-center',
|
||
|
|
style({transform: 'none', visibility: 'visible'}),
|
||
|
|
),
|
||
|
|
|
||
|
|
// If the tab is either on the left or right, we additionally add a `min-height` of 1px
|
||
|
|
// in order to ensure that the element has a height before its state changes. This is
|
||
|
|
// necessary because Chrome does seem to skip the transition in RTL mode if the element does
|
||
|
|
// not have a static height and is not rendered. See related issue: #9465
|
||
|
|
state(
|
||
|
|
'left',
|
||
|
|
style({
|
||
|
|
transform: 'translate3d(-100%, 0, 0)',
|
||
|
|
minHeight: '1px',
|
||
|
|
|
||
|
|
// Normally this is redundant since we detach the content from the DOM, but if the user
|
||
|
|
// opted into keeping the content in the DOM, we have to hide it so it isn't focusable.
|
||
|
|
visibility: 'hidden',
|
||
|
|
}),
|
||
|
|
),
|
||
|
|
state(
|
||
|
|
'right',
|
||
|
|
style({
|
||
|
|
transform: 'translate3d(100%, 0, 0)',
|
||
|
|
minHeight: '1px',
|
||
|
|
visibility: 'hidden',
|
||
|
|
}),
|
||
|
|
),
|
||
|
|
|
||
|
|
transition(
|
||
|
|
'* => left, * => right, left => center, right => center',
|
||
|
|
animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
|
||
|
|
),
|
||
|
|
transition('void => left-origin-center', [
|
||
|
|
style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'}),
|
||
|
|
animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
|
||
|
|
]),
|
||
|
|
transition('void => right-origin-center', [
|
||
|
|
style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'}),
|
||
|
|
animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
|
||
|
|
]),
|
||
|
|
]),
|
||
|
|
};
|