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

export const slideYAnimation = trigger('slideYAnimation', [
  transition(':enter', [
    style({
      transform: 'translateY(100%)',
      marginLeft: 'auto',
      opacity: '0',
      height: '100%',
    }),
    animate(
      430,
      keyframes([
        style({
          opacity: '1',
          transform: 'translateY(65%)',
          offset: 0.35,
        }),
        style({
          transform: 'translateY(0)',
          height: '100%',
          opacity: '1',
          offset: 1,
        }),
      ])
    ),
  ]),
  transition(':leave', [
    style({
      transform: 'translateY(0)',
      height: '100%',
      opacity: '1',
      marginLeft: 'auto',
    }),
    animate(
      430,
      keyframes([
        style({
          opacity: '1',
          transform: 'translateY(65%)',
          offset: 0.65,
        }),
        style({
          width: '0',
          height: '100%',
          transform: 'translateY(100%)',
          opacity: '0',
          offset: 1,
        }),
      ])
    ),
  ]),
]);
