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

// export const Flyout = trigger('Flyout', [state('show', style({
//   transform: 'translateX(0)'
// })), state('out', style({
//   transform: 'translateX(100%)'
// })), state('in', style({
//   transform: 'translateX(-100%)'
// })),
//   transition('in=>show', animate('600ms ease-in')),
//   transition('show=>out', animate('600ms ease-out')),
// ]);

export const Flyout = trigger('Flyout', [
  state('in', style({transform: 'translateX(0)'})),
  transition('void => *', [
    style({transform: 'translateX(-100%)'}),
    animate('600ms ease-in')
  ]),
  transition('* => void', [
    animate('600ms ease-out', style({transform: 'translateX(100%)'}))
  ])
]);
