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

export const staggerAnimation = trigger('staggerAnimation', [
  transition(':enter, * => 0, * => -1', []),
  transition('* => *', [
    // each time the binding value changes
    query(':leave', [style({ height: '0', marginTop: '-56px', visibility: 'hidden' })]),
    query('*', [stagger(20, [animate('0.1s', style({ opacity: 0 }))])]),
    query('*', [stagger(-10, [animate('0.1s', style({ opacity: 1 }))])]),
  ]),
]);
