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

export const routerAnimation: AnimationTriggerMetadata = trigger('routerAnimation', [
  transition('* => *', [
    query(':enter, :leave', style({ position: 'fixed', width: '100%' })
      , { optional: true }),
    group([
      query(':enter', [
        style({ transform: 'translateY(-100%)' }),
        animate('0.7s ease-in-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateY(0%)' }),
        animate('0.7s ease-in-out', style({ transform: 'translateX(100%)' }))
      ], { optional: true }),
    ])
  ]),
  transition('* => *', [
    group([
      query(':enter, :leave', style({ position: 'fixed', width: '100%' })
        , { optional: true }),
      query(':enter', [
        style({ transform: 'translateY(100%)' }),
        animate('0.7s ease-in-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateY(0%)' }),
        animate('0.7s ease-in-out', style({ transform: 'translateX(-100%)' }))
      ], { optional: true }),
    ])
  ])
])