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

export const fadeInState = state('fadeIn', style({ opacity: 1 }));
export const fadeInEnter =  transition('* => fadeIn', [
  style({ opacity: 0 }),
  animate(300, style({ opacity: 1 })),
]);
const fadeEnter =  transition(':enter', [
  style({ opacity: 0 }),
  animate(300, style({ opacity: 1 })),
]);

export const fadeOutState = state('fadeOut', style({ opacity: 0 }));
export const fadeOutLeave = transition('fadeIn => fadeOut', [
  style({ opacity: 1 }),
  animate(400, style({ opacity: 0 })),
]);
const fadeLeave =  transition(':leave', [
  style({ opacity: 0 }),
  animate(300, style({ opacity: 1 })),
]);

export const fadeIn = trigger('fadeIn', [
  fadeEnter,
]);

export const fadeOut = trigger('fadeOut', [
  fadeLeave,
]);

export const fadeInOut = trigger('fadeInOut', [
  fadeEnter,
  fadeLeave,
]);