51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import {
|
|
trigger,
|
|
animate,
|
|
transition,
|
|
style,
|
|
query, group
|
|
} from '@angular/animations';
|
|
|
|
export const collapseUp = trigger('collapseUp', [
|
|
transition('* => void', [
|
|
style({opacity: 1, transform: 'translateY(0%)'}),
|
|
animate('0.5s', style({opacity: 0, transform: 'translateY(-100%)'}))
|
|
])
|
|
]);
|
|
|
|
export const expandDown = trigger('expandDown', [
|
|
transition('void => *', [
|
|
style({opacity: 0, transform: 'translateY(-100%)'}),
|
|
animate('0.5s', style({opacity: 1, transform: 'translateY(0%)'}))
|
|
])
|
|
]);
|
|
|
|
export const fadeIn = trigger('fadeIn', [
|
|
transition('void => *', [
|
|
style({opacity: 0}),
|
|
animate('0.5s ease-in-out', style({opacity: 1}))
|
|
])
|
|
]);
|
|
|
|
export const fadeOut = trigger('fadeOut', [
|
|
transition('* => void', [
|
|
style({opacity: 1}),
|
|
animate('0.5s ease-in-out', style({opacity: 0}))
|
|
])
|
|
]);
|
|
|
|
export const routerTransition = trigger('routerTransition', [
|
|
transition('* <=> *', [
|
|
query(':enter, :leave', style({position: 'fixed', width: '100%'}), {optional: true}),
|
|
group([
|
|
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}),
|
|
])
|
|
])
|
|
]);
|