36 lines
1.7 KiB
TypeScript
36 lines
1.7 KiB
TypeScript
|
import { trigger, state, transition, style, animate, query, stagger, keyframes } from '@angular/animations';
|
||
|
|
|
||
|
|
export const Anim = [
|
||
|
|
trigger('discoveryFilterAnim', [
|
||
|
|
transition('void => *', [
|
||
|
|
query('*', style({ opacity: 0 }), { optional: true }),
|
||
|
|
query('*', stagger('3ms', [
|
||
|
|
animate('0.08s ease-in', keyframes([
|
||
|
|
style({ opacity: 0, transform: 'translateY(-75%)', offset: 0 }),
|
||
|
|
style({ opacity: .5, transform: 'translateY(35px)', offset: 0.3 }),
|
||
|
|
style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 }),
|
||
|
|
]))]), { optional: true }),
|
||
|
|
]),
|
||
|
|
// transition('* => void', [
|
||
|
|
// query('*', style({ opacity: 1 }), { optional: true }),
|
||
|
|
// query('*', stagger('5ms', [
|
||
|
|
// animate('0.08s ease-in', keyframes([
|
||
|
|
// style({ opacity: 1, transform: 'translateY(0)', offset: 0 }),
|
||
|
|
// style({ opacity: .5, transform: 'translateY(35px)', offset: 0.3 }),
|
||
|
|
// style({ opacity: 0, transform: 'translateY(-75%)', offset: 1.0 }),
|
||
|
|
// ]))]), { optional: true }),
|
||
|
|
// ])
|
||
|
|
]),
|
||
|
|
trigger('discoveryResultAnim', [
|
||
|
|
transition('void => *', [
|
||
|
|
query('*', style({ opacity: 0 }), { optional: true }),
|
||
|
|
query('*', stagger('30ms', [
|
||
|
|
animate('0.08s ease-in', keyframes([
|
||
|
|
style({ opacity: 0, transform: 'translateX(-95%)', offset: 0 }),
|
||
|
|
style({ opacity: .5, transform: 'translateX(95px)', offset: 0.3 }),
|
||
|
|
style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 }),
|
||
|
|
]))]), { optional: true }),
|
||
|
|
]),
|
||
|
|
]),
|
||
|
|
];
|