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

export const fadeAnimation = trigger('pageRouteAnim', [
  transition('* => *', [
    query(':enter',
      style({ opacity: 0 }), { optional: true }),
    query(':enter',
      stagger('300ms', [
        animate('.6s 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 })
  ])
]);

export const slideAnimation = trigger('pageRouteAnim', [
  trigger('slideInOutAnimation', [
    state('*', style({
      position: 'fixed',
      color: 'rgb(3, 109, 99)',
      textAlign: 'center',
      paddingTop: '5%',
      backgroundColor: 'rgba(0, 240, 252, 0.38)',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    })
    ),
    transition(':enter', [
      style({
        transform: 'translateX(-100%)',
        backgroundColor: 'rgba(0, 240, 252, 0.38)'
      }),
      animate('500ms', style({
        transform: 'translateX(0%)',
        backgroundColor: 'rgba(0, 240, 252, 0.38)'
      }))
    ]),
    transition(':leave', [
      animate('500ms', style({
        transform: 'translateX(-100%)',
        backgroundColor: 'rgba(0, 240, 252, 0.38)'
      }))
    ])
  ])
]);

