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

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