Skip to content

Commit 50258cf

Browse files
crisbetocrisbeto
committed
refactor: export component animations for reuse
Exports all of the component animations so they can be reused by consumers. Fixes #8904.
1 parent 2fb4d61 commit 50258cf

30 files changed

+388
-228
lines changed

‎src/lib/dialog/dialog-animations.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
import {
9+
animate,
10+
state,
11+
style,
12+
transition,
13+
trigger,
14+
AnimationTriggerMetadata,
15+
} from '@angular/animations';
16+
17+
/**
18+
* Animation that slides the dialog in and out of view and fades the opacity.
19+
*/
20+
export const slideDialog: AnimationTriggerMetadata = trigger('slideDialog', [
21+
// Note: The `enter` animation doesn't transition to something like `translate3d(0, 0, 0)
22+
// scale(1)`, because for some reason specifying the transform explicitly, causes IE both
23+
// to blur the dialog content and decimate the animation performance. Leaving it as `none`
24+
// solves both issues.
25+
state('enter', style({ transform: 'none', opacity: 1 })),
26+
state('void', style({ transform: 'translate3d(0, 25%, 0) scale(0.9)', opacity: 0 })),
27+
state('exit', style({ transform: 'translate3d(0, 25%, 0)', opacity: 0 })),
28+
transition('* => *', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')),
29+
]);

‎src/lib/dialog/dialog-container.ts

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@ import {
1919
ViewEncapsulation,
2020
ChangeDetectionStrategy,
2121
} from '@angular/core';
22-
import {animate, AnimationEvent, state, style, transition, trigger} from '@angular/animations';
2322
import {DOCUMENT} from '@angular/common';
23+
import {AnimationEvent} from '@angular/animations';
24+
import {slideDialog} from './dialog-animations';
2425
import {
2526
BasePortalOutlet,
2627
ComponentPortal,
@@ -55,18 +56,7 @@ export function throwMatDialogContentAlreadyAttachedError() {
5556
// Using OnPush for dialogs caused some G3 sync issues. Disabled until we can track them down.
5657
// tslint:disable-next-line:validate-decorators
5758
changeDetection: ChangeDetectionStrategy.Default,
58-
animations: [
59-
trigger('slideDialog', [
60-
// Note: The `enter` animation doesn't transition to something like `translate3d(0, 0, 0)
61-
// scale(1)`, because for some reason specifying the transform explicitly, causes IE both
62-
// to blur the dialog content and decimate the animation performance. Leaving it as `none`
63-
// solves both issues.
64-
state('enter', style({ transform: 'none', opacity: 1 })),
65-
state('void', style({ transform: 'translate3d(0, 25%, 0) scale(0.9)', opacity: 0 })),
66-
state('exit', style({ transform: 'translate3d(0, 25%, 0)', opacity: 0 })),
67-
transition('* => *', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')),
68-
])
69-
],
59+
animations: [slideDialog],
7060
host: {
7161
'class': 'mat-dialog-container',
7262
'tabindex': '-1',

‎src/lib/dialog/public-api.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,4 @@ export * from './dialog-container';
1212
export * from './dialog-content-directives';
1313
export * from './dialog-config';
1414
export * from './dialog-ref';
15-
15+
export * from './dialog-animations';

‎src/lib/expansion/expansion-animations.ts

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
import {
9+
animate,
10+
state,
11+
style,
12+
transition,
13+
trigger,
14+
AnimationTriggerMetadata,
15+
} from '@angular/animations';
16+
17+
/** Time and timing curve for expansion panel animations. */
18+
export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
19+
20+
/**
21+
* Animation that rotates the indicator arrow.
22+
*/
23+
export const indicatorRotate: AnimationTriggerMetadata = trigger('indicatorRotate', [
24+
state('collapsed', style({transform: 'rotate(0deg)'})),
25+
state('expanded', style({transform: 'rotate(180deg)'})),
26+
transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
27+
]);
28+
29+
/**
30+
* Animation that expands and collapses the panel header height.
31+
*/
32+
export const expansionHeaderHeight: AnimationTriggerMetadata = trigger('expansionHeight', [
33+
state('collapsed', style({
34+
height: '{{collapsedHeight}}',
35+
}), {
36+
params: {collapsedHeight: '48px'},
37+
}),
38+
state('expanded', style({
39+
height: '{{expandedHeight}}'
40+
}), {
41+
params: {expandedHeight: '64px'}
42+
}),
43+
transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
44+
]);
45+
46+
/**
47+
* Animation that expands and collapses the panel content.
48+
*/
49+
export const bodyExpansion: AnimationTriggerMetadata = trigger('bodyExpansion', [
50+
state('collapsed', style({height: '0px', visibility: 'hidden'})),
51+
state('expanded', style({height: '*', visibility: 'visible'})),
52+
transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
53+
]);

‎src/lib/expansion/expansion-panel-header.ts

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {animate, state, style, transition, trigger} from '@angular/animations';
109
import {FocusMonitor} from '@angular/cdk/a11y';
1110
import {ENTER, SPACE} from '@angular/cdk/keycodes';
1211
import {filter} from 'rxjs/operators/filter';
@@ -23,7 +22,8 @@ import {
2322
} from '@angular/core';
2423
import {merge} from 'rxjs/observable/merge';
2524
import {Subscription} from 'rxjs/Subscription';
26-
import {EXPANSION_PANEL_ANIMATION_TIMING, MatExpansionPanel} from './expansion-panel';
25+
import {MatExpansionPanel} from './expansion-panel';
26+
import {indicatorRotate, expansionHeaderHeight} from './expansion-animations';
2727

2828

2929
/**
@@ -41,6 +41,7 @@ import {EXPANSION_PANEL_ANIMATION_TIMING, MatExpansionPanel} from './expansion-p
4141
encapsulation: ViewEncapsulation.None,
4242
preserveWhitespaces: false,
4343
changeDetection: ChangeDetectionStrategy.OnPush,
44+
animations: [indicatorRotate, expansionHeaderHeight],
4445
host: {
4546
'class': 'mat-expansion-panel-header',
4647
'role': 'button',
@@ -59,26 +60,6 @@ import {EXPANSION_PANEL_ANIMATION_TIMING, MatExpansionPanel} from './expansion-p
5960
}
6061
}`,
6162
},
62-
animations: [
63-
trigger('indicatorRotate', [
64-
state('collapsed', style({transform: 'rotate(0deg)'})),
65-
state('expanded', style({transform: 'rotate(180deg)'})),
66-
transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
67-
]),
68-
trigger('expansionHeight', [
69-
state('collapsed', style({
70-
height: '{{collapsedHeight}}',
71-
}), {
72-
params: {collapsedHeight: '48px'},
73-
}),
74-
state('expanded', style({
75-
height: '{{expandedHeight}}'
76-
}), {
77-
params: {expandedHeight: '64px'}
78-
}),
79-
transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
80-
]),
81-
],
8263
})
8364
export class MatExpansionPanelHeader implements OnDestroy {
8465
private _parentChangeSubscription = Subscription.EMPTY;

‎src/lib/expansion/expansion-panel.ts

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {animate, state, style, transition, trigger} from '@angular/animations';
109
import {
1110
ChangeDetectionStrategy,
1211
ChangeDetectorRef,
@@ -27,9 +26,7 @@ import {CanDisable, mixinDisabled} from '@angular/material/core';
2726
import {Subject} from 'rxjs/Subject';
2827
import {MatAccordion} from './accordion';
2928
import {coerceBooleanProperty} from '@angular/cdk/coercion';
30-
31-
/** Time and timing curve for expansion panel animations. */
32-
export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
29+
import {bodyExpansion} from './expansion-animations';
3330

3431
// Boilerplate for applying mixins to MatExpansionPanel.
3532
/** @docs-private */
@@ -71,6 +68,7 @@ export type MatExpansionPanelState = 'expanded' | 'collapsed';
7168
changeDetection: ChangeDetectionStrategy.OnPush,
7269
inputs: ['disabled', 'expanded'],
7370
outputs: ['opened', 'closed'],
71+
animations: [bodyExpansion],
7472
host: {
7573
'class': 'mat-expansion-panel',
7674
'[class.mat-expanded]': 'expanded',
@@ -79,13 +77,6 @@ export type MatExpansionPanelState = 'expanded' | 'collapsed';
7977
providers: [
8078
{provide: _MatExpansionPanelMixinBase, useExisting: forwardRef(() => MatExpansionPanel)}
8179
],
82-
animations: [
83-
trigger('bodyExpansion', [
84-
state('collapsed', style({height: '0px', visibility: 'hidden'})),
85-
state('expanded', style({height: '*', visibility: 'visible'})),
86-
transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
87-
]),
88-
],
8980
})
9081
export class MatExpansionPanel extends _MatExpansionPanelMixinBase
9182
implements CanDisable, OnChanges, OnDestroy {

‎src/lib/expansion/public-api.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,4 @@ export * from './expansion-module';
1010
export * from './accordion';
1111
export * from './expansion-panel';
1212
export * from './expansion-panel-header';
13-
14-
13+
export * from './expansion-animations';

‎src/lib/form-field/form-field-animations.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
import {
9+
animate,
10+
state,
11+
style,
12+
transition,
13+
trigger,
14+
AnimationTriggerMetadata,
15+
} from '@angular/animations';
16+
17+
/**
18+
* Animation that transitions the form field's error and hint messages.
19+
*/
20+
export const transitionMessages: AnimationTriggerMetadata = trigger('transitionMessages', [
21+
// TODO(mmalerba): Use angular animations for label animation as well.
22+
state('enter', style({ opacity: 1, transform: 'translateY(0%)' })),
23+
transition('void => enter', [
24+
style({ opacity: 0, transform: 'translateY(-100%)' }),
25+
animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)'),
26+
]),
27+
]);

‎src/lib/form-field/form-field.ts

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {animate, state, style, transition, trigger} from '@angular/animations';
109
import {coerceBooleanProperty} from '@angular/cdk/coercion';
1110
import {take} from 'rxjs/operators/take';
1211
import {startWith} from 'rxjs/operators/startWith';
@@ -41,6 +40,7 @@ import {MatPlaceholder} from './placeholder';
4140
import {MatLabel} from './label';
4241
import {MatPrefix} from './prefix';
4342
import {MatSuffix} from './suffix';
43+
import {transitionMessages} from './form-field-animations';
4444

4545

4646
let nextUniqueId = 0;
@@ -57,16 +57,7 @@ let nextUniqueId = 0;
5757
// The MatInput styles are fairly minimal so it shouldn't be a big deal for people who
5858
// aren't using MatInput.
5959
styleUrls: ['form-field.css', '../input/input.css'],
60-
animations: [
61-
// TODO(mmalerba): Use angular animations for label animation as well.
62-
trigger('transitionMessages', [
63-
state('enter', style({ opacity: 1, transform: 'translateY(0%)' })),
64-
transition('void => enter', [
65-
style({ opacity: 0, transform: 'translateY(-100%)' }),
66-
animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)'),
67-
]),
68-
]),
69-
],
60+
animations: [transitionMessages],
7061
host: {
7162
'class': 'mat-input-container mat-form-field',
7263
'[class.mat-input-invalid]': '_control.errorState',

‎src/lib/form-field/public-api.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,4 @@ export * from './placeholder';
1616
export * from './prefix';
1717
export * from './suffix';
1818
export * from './label';
19+
export * from './form-field-animations';

‎src/lib/sidenav/drawer-animations.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
import {
9+
animate,
10+
state,
11+
style,
12+
transition,
13+
trigger,
14+
AnimationTriggerMetadata,
15+
} from '@angular/animations';
16+
17+
/**
18+
* Animation that slides a drawer in and out.
19+
*/
20+
export const transformDrawer: AnimationTriggerMetadata = trigger('transform', [
21+
state('open, open-instant', style({
22+
transform: 'translate3d(0, 0, 0)',
23+
visibility: 'visible',
24+
})),
25+
state('void', style({
26+
visibility: 'hidden',
27+
})),
28+
transition('void => open-instant', animate('0ms')),
29+
transition('void <=> open, open-instant => void',
30+
animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
31+
]);

‎src/lib/sidenav/drawer.ts

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
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.io/license
77
*/
8-
import {animate, AnimationEvent, state, style, transition, trigger} from '@angular/animations';
8+
import {AnimationEvent} from '@angular/animations';
99
import {FocusTrap, FocusTrapFactory, FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
1010
import {Directionality} from '@angular/cdk/bidi';
1111
import {coerceBooleanProperty} from '@angular/cdk/coercion';
@@ -42,6 +42,7 @@ import {debounceTime} from 'rxjs/operators/debounceTime';
4242
import {map} from 'rxjs/operators/map';
4343
import {Subject} from 'rxjs/Subject';
4444
import {Observable} from 'rxjs/Observable';
45+
import {transformDrawer} from './drawer-animations';
4546

4647

4748
/** Throws an exception when two MatDrawer are matching the same position. */
@@ -109,20 +110,7 @@ export class MatDrawerContent implements AfterContentInit {
109110
selector: 'mat-drawer',
110111
exportAs: 'matDrawer',
111112
template: '<ng-content></ng-content>',
112-
animations: [
113-
trigger('transform', [
114-
state('open, open-instant', style({
115-
transform: 'translate3d(0, 0, 0)',
116-
visibility: 'visible',
117-
})),
118-
state('void', style({
119-
visibility: 'hidden',
120-
})),
121-
transition('void => open-instant', animate('0ms')),
122-
transition('void <=> open, open-instant => void',
123-
animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
124-
])
125-
],
113+
animations: [transformDrawer],
126114
host: {
127115
'class': 'mat-drawer',
128116
'[@transform]': '_animationState',

‎src/lib/sidenav/public-api.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,4 @@
99
export * from './sidenav-module';
1010
export * from './drawer';
1111
export * from './sidenav';
12-
12+
export * from './drawer-animations';

‎src/lib/sidenav/sidenav.ts

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
ViewEncapsulation
1414
} from '@angular/core';
1515
import {MatDrawer, MatDrawerContainer, MatDrawerContent} from './drawer';
16-
import {animate, state, style, transition, trigger} from '@angular/animations';
16+
import {transformDrawer} from './drawer-animations';
1717
import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
1818

1919

@@ -44,20 +44,7 @@ export class MatSidenavContent extends MatDrawerContent {
4444
selector: 'mat-sidenav',
4545
exportAs: 'matSidenav',
4646
template: '<ng-content></ng-content>',
47-
animations: [
48-
trigger('transform', [
49-
state('open, open-instant', style({
50-
transform: 'translate3d(0, 0, 0)',
51-
visibility: 'visible',
52-
})),
53-
state('void', style({
54-
visibility: 'hidden',
55-
})),
56-
transition('void => open-instant', animate('0ms')),
57-
transition('void <=> open, open-instant => void',
58-
animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
59-
])
60-
],
47+
animations: [transformDrawer],
6148
host: {
6249
'class': 'mat-drawer mat-sidenav',
6350
'tabIndex': '-1',

0 commit comments

Comments
 (0)