49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import {
|
|
trigger,
|
|
animate,
|
|
transition,
|
|
style,
|
|
query,
|
|
stagger,
|
|
keyframes,
|
|
state,
|
|
group,
|
|
animateChild
|
|
} from '@angular/animations';
|
|
|
|
export const slide = trigger('routerAnim', [
|
|
transition('* <=> *', [
|
|
query(':enter, :leave', style({ position: 'fixed', width: '100%' })
|
|
, { optional: true }),
|
|
group([
|
|
query(':enter', [
|
|
style({ transform: 'translateX(-100%)' }),
|
|
animate('0.4s ease-in-out', style({ transform: 'translateX(0%)' }))
|
|
], { optional: true }),
|
|
query(':leave', [
|
|
style({ transform: 'translateX(0%)' }),
|
|
animate('0.4s ease-in-out', style({ transform: 'translateX(100%)' }))
|
|
], { optional: true }),
|
|
])
|
|
])
|
|
]);
|
|
|
|
export const fade = trigger('routerAnim', [
|
|
transition('* <=> *', [
|
|
query(':enter, :leave', style({ position: 'fixed', width: '100%' })
|
|
, { optional: true }),
|
|
group([
|
|
query(':enter', [
|
|
style({ opacity: 0 }),
|
|
animate('0.4s ease-in-out', style({ opacity: 1 }))
|
|
], { optional: true }),
|
|
query(':leave', [
|
|
style({ opacity: 1 }),
|
|
animate('0.4s ease-in-out', style({ opacity: 0 }))
|
|
], { optional: true }),
|
|
])
|
|
])
|
|
]);
|
|
|
|
|