Animating list of items in Angular 8

listAnimation.ts

import { trigger, state, style, animate, transition, query, stagger, group } from '@angular/animations';
export const listAnimation = trigger('listAnimation', [
    transition('* => *', [
        // each time the binding value changes
        query(':enter', [style({ opacity: 0 }), stagger('60ms', animate('600ms ease-out', style({ opacity: 1 })))], {
            optional: true
        }),
        query(':leave', animate('200ms', style({ opacity: 0 })), { optional: true })
        // query(':leave', [
        //   stagger(100, [
        //     animate('0.5s')
        //   ])
        // ], { optional: true }),
        // query(':enter', [
        //   style({ opacity: 0 }),
        //   stagger(100, [
        //     animate('0.5s')
        //   ])
        // ], { optional: true })
    ])
]);