41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { animate, animateChild, group, query, style, transition, trigger } from '@angular/animations';
|
|
|
|
export const slideInAnimation = trigger('routeAnimations', [
|
|
transition('HomePage <=> AdminPage', [
|
|
style({ position: 'relative' }),
|
|
query(':enter, :leave', [
|
|
style({
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
}),
|
|
]),
|
|
query(':enter', [style({ left: '-100%' })]),
|
|
query(':leave', animateChild()),
|
|
group([
|
|
query(':leave', [animate('300ms ease-out', style({ left: '100%' }))]),
|
|
query(':enter', [animate('300ms ease-out', style({ left: '0%' }))]),
|
|
]),
|
|
query(':enter', animateChild()),
|
|
]),
|
|
transition('* <=> FilterPage', [
|
|
style({ position: 'relative' }),
|
|
query(':enter, :leave', [
|
|
style({
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
}),
|
|
]),
|
|
query(':enter', [style({ left: '-100%' })]),
|
|
query(':leave', animateChild()),
|
|
group([
|
|
query(':leave', [animate('200ms ease-out', style({ left: '100%' }))]),
|
|
query(':enter', [animate('300ms ease-out', style({ left: '0%' }))]),
|
|
]),
|
|
query(':enter', animateChild()),
|
|
]),
|
|
]);
|