import { animate, style, transition, trigger } from "@angular/animations";

export const puffAnimation = trigger('puffAnimation', [
    transition(':enter', [
        style({
            opacity: 0,
            filter: 'blur(4px)',
            width: 0,
            transform: 'scale(0.1)',
        }),
        animate(
            '200ms cubic-bezier(0.46, 0.03, 0.51, 0.95)',
            style({
                opacity: 1,
                filter: 'blur(0px)',
                width: '*',
                'transform-origin': 'center',
                transform: 'scale(1)',
            })
        ),
    ]),
    transition(':leave', [
        style({
            opacity: 1,
            filter: 'blur(0px)',
            width: '*',
            transform: 'scale(1)',
        }),
        animate(
            '200ms cubic-bezier(0.46, 0.03, 0.51, 0.95)',
            style({
                opacity: 0,
                filter: 'blur(4px)',
                width: 0,
                'transform-origin': 'center',
                transform: 'scale(0.1)',
            })
        ),
    ]),
]);