46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import {animate, query, state, style, transition, trigger} from '@angular/animations';
|
|
|
|
export const fade = [
|
|
// the fade-in/fade-out animation.
|
|
trigger('fade', [
|
|
// the "in" style determines the "resting" state of the element when it is visible.
|
|
state('in', style({opacity: 1, transform: 'translateY(0px)'})),
|
|
|
|
// fade in when created. this could also be written as transition('void => *')
|
|
transition(':enter', [style({opacity: 0, transform: 'translateY(-10px)'}), animate(200)]),
|
|
]),
|
|
];
|
|
|
|
export const fader = trigger('fader', [
|
|
transition('* <=> *', [
|
|
// Set a default style for enter and leave
|
|
query(
|
|
':enter, :leave',
|
|
[
|
|
style({
|
|
position: 'absolute',
|
|
left: 0,
|
|
width: '100%',
|
|
opacity: 0,
|
|
transform: 'scale(1) translateY(-10px)',
|
|
}),
|
|
],
|
|
{optional: true}
|
|
),
|
|
// Animate the new page in
|
|
query(
|
|
':enter',
|
|
[
|
|
animate(
|
|
'200ms ease',
|
|
style({
|
|
opacity: 1,
|
|
transform: 'scale(1) translateY(0)',
|
|
})
|
|
),
|
|
],
|
|
{optional: true}
|
|
),
|
|
]),
|
|
]);
|