75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
// #docregion reusable
|
|
import {
|
|
animation, trigger, animateChild, group,
|
|
transition, animate, style, query
|
|
} from '@angular/animations';
|
|
|
|
export const transAnimation = animation([
|
|
style({
|
|
height: '{{ height }}',
|
|
opacity: '{{ opacity }}',
|
|
backgroundColor: '{{ backgroundColor }}'
|
|
}),
|
|
animate('{{ time }}')
|
|
]);
|
|
// #enddocregion reusable
|
|
|
|
// Routable animations
|
|
// #docregion route-animations
|
|
export const slideInAnimation =
|
|
// #docregion style-view
|
|
trigger('routeAnimations', [
|
|
transition('HomePage <=> AboutPage', [
|
|
style({ position: 'relative' }),
|
|
query(':enter, :leave', [
|
|
style({
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%'
|
|
})
|
|
]),
|
|
// #enddocregion style-view
|
|
// #docregion query
|
|
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()),
|
|
])
|
|
// #enddocregion query
|
|
]);
|
|
// #enddocregion route-animations
|