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('500ms', [
                animate('0.08s ease-in', keyframes([
                    style({ opacity: 0, transform: 'translateX(-75%)', offset: 0 }),
                    style({ opacity: .5, transform: 'translateX(35px)', offset: 0.3 }),
                    style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 }),
                ]))]), { optional: true }),
        ]),
    ]),
];