fuse-angular/src/app/core/animations.ts

115 lines
3.6 KiB
TypeScript
Raw Normal View History

2017-08-19 13:20:09 +00:00
import { sequence, trigger, stagger, animate, style, group, query as q, transition, keyframes, animateChild, state } from '@angular/animations';
const query = (s, a, o = {optional: true}) => q(s, a, o);
export class Animations
{
public static slideInOut = trigger('slideInOut', [
2017-08-02 16:51:02 +00:00
state('0', style({
height : '0px',
display: 'none'
})),
state('1', style({
height : '*',
display: 'block'
})),
transition('1 => 0', animate('300ms ease-out')),
transition('0 => 1', animate('300ms ease-in'))
]);
2017-08-02 16:51:02 +00:00
public static slideInLeft = trigger('slideInLeft', [
2017-08-02 16:51:02 +00:00
state('void', style({
transform: 'translateX(-100%)',
display : 'none'
})),
state('*', style({
transform: 'translateX(0)',
display : 'flex'
})),
transition('void => *', animate('300ms')),
transition('* => void', animate('300ms'))
]);
2017-08-02 16:51:02 +00:00
public static slideInRight = trigger('slideInRight', [
2017-08-02 16:51:02 +00:00
state('void', style({
transform: 'translateX(100%)',
display : 'none'
})),
state('*', style({
transform: 'translateX(0)',
display : 'flex'
})),
transition('void => *', animate('300ms')),
transition('* => void', animate('300ms'))
]);
public static slideInTop = trigger('slideInTop', [
state('void', style({
transform: 'translateY(-100%)',
display : 'none'
})),
state('*', style({
transform: 'translateY(0)',
display : 'flex'
})),
transition('void => *', animate('300ms')),
transition('* => void', animate('300ms'))
]);
public static slideInBottom = trigger('slideInBottom', [
2017-08-19 13:20:09 +00:00
state('void',
style({
transform: 'translateY(100%)',
display : 'none'
})),
2017-08-02 16:51:02 +00:00
state('*', style({
transform: 'translateY(0)',
display : 'flex'
})),
transition('void => *', animate('300ms')),
transition('* => void', animate('300ms'))
]);
2017-08-19 13:20:09 +00:00
public static routerTransition = trigger('routerTransition', [
transition('* => *', [
query(':enter, :leave', style({
position: 'absolute',
top : 0,
bottom : 0,
left : 0,
right : 0
2017-08-19 13:20:09 +00:00
})),
query(':enter', style({
transform: 'translateY(100%)',
opacity : 0
})),
sequence([
group([
query(':leave', [
style({
transform: 'translateY(0)',
opacity : 1
}),
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
style({
transform: 'translateY(-100%)',
opacity : 0
}))
]),
query(':enter', [
style({transform: 'translateY(100%)'}),
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
style({
transform: 'translateY(0%)',
opacity : 1
}))
])
]),
query(':leave', animateChild()),
query(':enter', animateChild())
])
])
]);
}