126 lines
4.6 KiB
TypeScript
126 lines
4.6 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 {
|
|
animate,
|
|
state,
|
|
style,
|
|
transition,
|
|
trigger,
|
|
keyframes,
|
|
AnimationTriggerMetadata,
|
|
query,
|
|
animateChild,
|
|
} from '@angular/animations';
|
|
import {AnimationCurves, AnimationDurations} from '@angular/material/core';
|
|
|
|
const SORT_ANIMATION_TRANSITION =
|
|
AnimationDurations.ENTERING + ' ' + AnimationCurves.STANDARD_CURVE;
|
|
|
|
/**
|
|
* Animations used by MatSort.
|
|
* @docs-private
|
|
* @deprecated No longer being used, to be removed.
|
|
* @breaking-change 21.0.0
|
|
*/
|
|
export const matSortAnimations: {
|
|
readonly indicator: AnimationTriggerMetadata;
|
|
readonly leftPointer: AnimationTriggerMetadata;
|
|
readonly rightPointer: AnimationTriggerMetadata;
|
|
readonly arrowOpacity: AnimationTriggerMetadata;
|
|
readonly arrowPosition: AnimationTriggerMetadata;
|
|
readonly allowChildren: AnimationTriggerMetadata;
|
|
} = {
|
|
/** Animation that moves the sort indicator. */
|
|
indicator: trigger('indicator', [
|
|
state('active-asc, asc', style({transform: 'translateY(0px)'})),
|
|
// 10px is the height of the sort indicator, minus the width of the pointers
|
|
state('active-desc, desc', style({transform: 'translateY(10px)'})),
|
|
transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)),
|
|
]),
|
|
|
|
/** Animation that rotates the left pointer of the indicator based on the sorting direction. */
|
|
leftPointer: trigger('leftPointer', [
|
|
state('active-asc, asc', style({transform: 'rotate(-45deg)'})),
|
|
state('active-desc, desc', style({transform: 'rotate(45deg)'})),
|
|
transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)),
|
|
]),
|
|
|
|
/** Animation that rotates the right pointer of the indicator based on the sorting direction. */
|
|
rightPointer: trigger('rightPointer', [
|
|
state('active-asc, asc', style({transform: 'rotate(45deg)'})),
|
|
state('active-desc, desc', style({transform: 'rotate(-45deg)'})),
|
|
transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)),
|
|
]),
|
|
|
|
/** Animation that controls the arrow opacity. */
|
|
arrowOpacity: trigger('arrowOpacity', [
|
|
state('desc-to-active, asc-to-active, active', style({opacity: 1})),
|
|
state('desc-to-hint, asc-to-hint, hint', style({opacity: 0.54})),
|
|
state(
|
|
'hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc, void',
|
|
style({opacity: 0}),
|
|
),
|
|
// Transition between all states except for immediate transitions
|
|
transition('* => asc, * => desc, * => active, * => hint, * => void', animate('0ms')),
|
|
transition('* <=> *', animate(SORT_ANIMATION_TRANSITION)),
|
|
]),
|
|
|
|
/**
|
|
* Animation for the translation of the arrow as a whole. States are separated into two
|
|
* groups: ones with animations and others that are immediate. Immediate states are asc, desc,
|
|
* peek, and active. The other states define a specific animation (source-to-destination)
|
|
* and are determined as a function of their prev user-perceived state and what the next state
|
|
* should be.
|
|
*/
|
|
arrowPosition: trigger('arrowPosition', [
|
|
// Hidden Above => Hint Center
|
|
transition(
|
|
'* => desc-to-hint, * => desc-to-active',
|
|
animate(
|
|
SORT_ANIMATION_TRANSITION,
|
|
keyframes([style({transform: 'translateY(-25%)'}), style({transform: 'translateY(0)'})]),
|
|
),
|
|
),
|
|
// Hint Center => Hidden Below
|
|
transition(
|
|
'* => hint-to-desc, * => active-to-desc',
|
|
animate(
|
|
SORT_ANIMATION_TRANSITION,
|
|
keyframes([style({transform: 'translateY(0)'}), style({transform: 'translateY(25%)'})]),
|
|
),
|
|
),
|
|
// Hidden Below => Hint Center
|
|
transition(
|
|
'* => asc-to-hint, * => asc-to-active',
|
|
animate(
|
|
SORT_ANIMATION_TRANSITION,
|
|
keyframes([style({transform: 'translateY(25%)'}), style({transform: 'translateY(0)'})]),
|
|
),
|
|
),
|
|
// Hint Center => Hidden Above
|
|
transition(
|
|
'* => hint-to-asc, * => active-to-asc',
|
|
animate(
|
|
SORT_ANIMATION_TRANSITION,
|
|
keyframes([style({transform: 'translateY(0)'}), style({transform: 'translateY(-25%)'})]),
|
|
),
|
|
),
|
|
state(
|
|
'desc-to-hint, asc-to-hint, hint, desc-to-active, asc-to-active, active',
|
|
style({transform: 'translateY(0)'}),
|
|
),
|
|
state('hint-to-desc, active-to-desc, desc', style({transform: 'translateY(-25%)'})),
|
|
state('hint-to-asc, active-to-asc, asc', style({transform: 'translateY(25%)'})),
|
|
]),
|
|
|
|
/** Necessary trigger that calls animate on children animations. */
|
|
allowChildren: trigger('allowChildren', [
|
|
transition('* <=> *', [query('@*', animateChild(), {optional: true})]),
|
|
]),
|
|
};
|