/
select-animations.ts
79 lines (76 loc) · 2.44 KB
/
select-animations.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/**
* @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.io/license
*/
import {
animate,
animateChild,
AnimationTriggerMetadata,
query,
state,
style,
transition,
trigger,
} from '@angular/animations';
/**
* The following are all the animations for the mat-select component, with each
* const containing the metadata for one animation.
*
* The values below match the implementation of the AngularJS Material mat-select animation.
* @docs-private
* @deprecated Use `matSelectAnimations` from `@angular/material/select` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
* @breaking-change 17.0.0
*/
export const matLegacySelectAnimations: {
readonly transformPanelWrap: AnimationTriggerMetadata;
readonly transformPanel: AnimationTriggerMetadata;
} = {
/**
* This animation ensures the select's overlay panel animation (transformPanel) is called when
* closing the select.
* This is needed due to https://github.com/angular/angular/issues/23302
*/
transformPanelWrap: trigger('transformPanelWrap', [
transition('* => void', query('@transformPanel', [animateChild()], {optional: true})),
]),
/**
* This animation transforms the select's overlay panel on and off the page.
*
* When the panel is attached to the DOM, it expands its width by the amount of padding, scales it
* up to 100% on the Y axis, fades in its border, and translates slightly up and to the
* side to ensure the option text correctly overlaps the trigger text.
*
* When the panel is removed from the DOM, it simply fades out linearly.
*/
transformPanel: trigger('transformPanel', [
state(
'void',
style({
transform: 'scaleY(0.8)',
minWidth: '100%',
opacity: 0,
}),
),
state(
'showing',
style({
opacity: 1,
minWidth: 'calc(100% + 32px)', // 32px = 2 * 16px padding
transform: 'scaleY(1)',
}),
),
state(
'showing-multiple',
style({
opacity: 1,
minWidth: 'calc(100% + 64px)', // 64px = 48px padding on the left + 16px padding on the right
transform: 'scaleY(1)',
}),
),
transition('void => *', animate('120ms cubic-bezier(0, 0, 0.2, 1)')),
transition('* => void', animate('100ms 25ms linear', style({opacity: 0}))),
]),
};