33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
import {
|
|
trigger,
|
|
animate,
|
|
transition,
|
|
style,
|
|
query, group
|
|
} from '@angular/animations';
|
|
|
|
export const expandDown = trigger('expandDown', [
|
|
transition('void => *', [
|
|
style({transform: 'translateY(-100%)'}),
|
|
animate('0.5s ease-in-out', style({transform: 'translateY(0%)'}))
|
|
])
|
|
]);
|
|
|
|
export const routerTransition = trigger('routerTransition', [
|
|
transition('* <=> *', [
|
|
/* order */
|
|
/* 1 */ query(':enter, :leave', style({ position: 'fixed', width:'100%' })
|
|
, { optional: true }),
|
|
/* 2 */ group([ // block executes in parallel
|
|
query(':enter', [
|
|
style({ transform: 'translateX(100%)' }),
|
|
animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
|
|
], { optional: true }),
|
|
query(':leave', [
|
|
style({ transform: 'translateX(0%)' }),
|
|
animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
|
|
], { optional: true }),
|
|
])
|
|
])
|
|
]);
|