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';

0 commit comments

Comments
 (0)