How to use the @angular/animations.stagger function in @angular/animations

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

export const diagramAnimations = [
  trigger('list', [
    transition(':enter', [
      query('@diagramRow', stagger(-60, animateChild()), { optional: true })
    ]),
  ]),
  trigger('diagramRow', [
    transition(':enter', [
      style({ transform: 'translate(-10px, -20px)', opacity: 0, height: 0, padding: 0 }),
      animate('0.4s cubic-bezier(.8,-0.6,0.2,1.5)',
        style({ transform: 'translate(0, 0)', opacity: 1, height: '*', padding: '*' }))
    ]),
    transition(':leave', [
      style({ transform: 'translate(0, 0) scale(1)', opacity: 1, height: '*' }),
      animate('0.3s cubic-bezier(0.4, 0.0, 1, 1)',
        // style({ transform: 'translate(-40px, -30px) scale(0.95)', opacity: 0, height: 0, padding: 0 }))
        style({ transform: 'translate(-40px, -30px) scale(0.95)', opacity: 0, height: 0 }))
    ]),
  ])
];

animations: [
    trigger('listAnimation', [
      transition(':enter, :leave, * => pending', []),
      transition('* => *', [
        // animate both the newly entered and removed items on the page
        // at the same time
        group([
          query(':enter', [
            style({ opacity: 0, height: '0px' }),
            stagger('50ms', [
              animate('500ms cubic-bezier(.35,0,.25,1)', style('*'))
            ])
          ], { optional: true }),

          query(':leave', [
            stagger('50ms', [
              animate('500ms cubic-bezier(.35,0,.25,1)', style({ opacity: 0, height: '0px', borderTop: 0, borderBottom: 0 }))
            ])
          ], { optional: true })
        ]),
      ]),
    ]),
  ]
})
export class ItemsListComponent implements OnInit {
  @Input() items: Item[];
  @Input() readonly = false;
  @Output() selected = new EventEmitter();
  @Output() deleted = new EventEmitter();

  animationsDisabled = true;

import {Component, Input, OnInit} from '@angular/core';
import {IAlert} from '../../../..';
import {animate, animateChild, query, stagger, style, transition, trigger} from '@angular/animations';

@Component({
  selector: 'ngb-alerts-container',
  templateUrl: './ngb-alerts-container.component.html',
  styleUrls: ['./ngb-alerts-container.component.scss'],

  animations: [
    // nice stagger effect when showing existing elements
    trigger('list', [
      transition(':enter', [
        // child animation selector + stagger
        query('@alerts',
          stagger(300, animateChild())
        )
      ]),
    ]),
    trigger('alerts', [
      // cubic-bezier for a tiny bouncing feel
      transition(':enter', [
        style({transform: 'scale(0.5)', opacity: 0}),
        animate('1s cubic-bezier(.8,-0.6,0.2,1.5)',
          style({transform: 'scale(1)', opacity: 1}))
      ]),
      transition(':leave', [
        style({transform: 'scale(1)', opacity: 1, height: '*'}),
        animate('1s cubic-bezier(.8,-0.6,0.2,1.5)',
          style({transform: 'scale(0.5)', opacity: 0, height: '0px', margin: '0px'}))
      ]),
    ])

animations: [
    trigger('breadcrumb', [
      transition('* <=> *', [
        query(':enter', style({ opacity: 0, position: 'fixed' }), {
          optional: true
        }),
        query(
          ':leave',
          stagger(-100, [
            animate('300ms cubic-bezier(0.35, 0, 0.25, 1)', style({ transform: 'translateX(-10px)', opacity: 0 }))
          ]),
          { optional: true }
        ),
        query(
          ':enter',
          stagger(100, [
            style({
              position: '*',
              transform: 'translateX(-10px)',
              opacity: 0
            }),
            animate('300ms cubic-bezier(0.35, 0, 0.25, 1)', style({ transform: 'translateX(0)', opacity: 1 }))
          ]),
          { optional: true }
        )
      ])
    ])
  ]
})
export class ChecklistOverviewComponent implements OnInit {
  breadcrumb$: Observable;

import { AfterViewInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, HostListener, Input, OnDestroy, Output, QueryList } from '@angular/core';
import { Subscription } from 'rxjs';
import { FloatingActionButtonComponent } from './floating-action-button.component';
import { FloatingActionButtonDirection, FloatingActionButtonsService } from './floating-action-buttons.service';

@Component({
    selector: 'ux-floating-action-buttons',
    templateUrl: './floating-action-buttons.component.html',
    providers: [FloatingActionButtonsService],
    changeDetection: ChangeDetectionStrategy.OnPush,
    preserveWhitespaces: false,
    animations: [
        trigger('fabAnimation', [
            transition('void => true', [
                query('ux-floating-action-button', style({ opacity: 0 })),
                query('ux-floating-action-button', stagger(50, animate(250, style({ opacity: 1 }))))
            ]),
            transition('true => void', [
                query('ux-floating-action-button', stagger(-50, animate(250, style({ opacity: 0 }))))
            ])
        ])
    ]
})
export class FloatingActionButtonsComponent implements AfterViewInit, OnDestroy {

    /** Specify the direction that the FAB should display */
    @Input() set direction(direction: FloatingActionButtonDirection) { this.fab.direction$.next(direction); }

    /** Emit whenever the open state changes */
    @Output() openChange = new EventEmitter();

    /** Get all child FAB buttons */

import { take } from 'rxjs/operators';
import { PageEvent, PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { Project } from 'src/app/proto/generated/zitadel/project_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';

@Component({
    selector: 'app-owned-project-list',
    templateUrl: './owned-project-list.component.html',
    styleUrls: ['./owned-project-list.component.scss'],
    animations: [
        trigger('list', [
            transition(':enter', [
                query('@animate',
                    stagger(80, animateChild()),
                ),
            ]),
        ]),
        trigger('animate', [
            transition(':enter', [
                style({ opacity: 0, transform: 'translateY(-100%)' }),
                animate('100ms', style({ opacity: 1, transform: 'translateY(0)' })),
            ]),
            transition(':leave', [
                style({ opacity: 1, transform: 'translateY(0)' }),
                animate('100ms', style({ opacity: 0, transform: 'translateY(100%)' })),
            ]),
        ]),
    ],
})
export class OwnedProjectListComponent implements OnInit, OnDestroy {

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


export const ZoomAnimation: AnimationTriggerMetadata =
trigger('zoomAnimation', [
    transition('static => zoomOut', [
        animate(250, style({ transform: 'translate(-50%, -50%) scale(2, 2)', opacity: 0 })),
    ]),
    transition('static => zoomIn', [
        query(':self', [
            style({ transform: 'translate(-50%, -50%) scale(.2, .2)', opacity: 0, top: '50%', left: '50%', margin: 0 }),
            stagger(50, [
                animate(250, style({ transform: 'translate(-50%, -50%) scale(1, 1)', opacity: 1 }))
            ])
        ])
    ])
]);

trigger('animate', [
    transition('void => *', [useAnimation(customAnimation)])
  ]),

  trigger('animateStagger', [
    state('50', style('*')),
    state('100', style('*')),
    state('200', style('*')),

    transition(
      'void => 50',
      query('@*', [stagger('50ms', [animateChild()])], { optional: true })
    ),
    transition(
      'void => 100',
      query('@*', [stagger('100ms', [animateChild()])], { optional: true })
    ),
    transition(
      'void => 200',
      query('@*', [stagger('200ms', [animateChild()])], { optional: true })
    )
  ]),

  trigger('fadeInOut', [
    state(
      '0',
      style({
        display: 'none',
        opacity: 0
      })
    ),
    state(

import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { MemberType, UserMembershipSearchResponse, UserView } from 'src/app/proto/generated/management_pb';
import { AdminService } from 'src/app/services/admin.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';

@Component({
    selector: 'app-memberships',
    templateUrl: './memberships.component.html',
    styleUrls: ['./memberships.component.scss'],
    animations: [
        trigger('cardAnimation', [
            transition('* => *', [
                query('@animate', stagger('40ms', animateChild()), { optional: true }),
            ]),
        ]),
        trigger('animate', [
            transition(':enter', [
                animate('.2s ease-in', keyframes([
                    style({ opacity: 0, offset: 0 }),
                    style({ opacity: .5, transform: 'scale(1.05)', offset: 0.3 }),
                    style({ opacity: 1, transform: 'scale(1)', offset: 1 }),
                ])),
            ]),
        ]),
    ],
})
export class MembershipsComponent implements OnInit {
    public loading: boolean = false;
    public memberships!: UserMembershipSearchResponse.AsObject;

import {animate, keyframes, query, stagger, style, transition, trigger} from '@angular/animations';
import {ANI_FAST_TIMING} from './animation.const';

const ANI = [
  query(':enter', style({opacity: 0, height: 0}), {optional: true}),

  query(':enter', stagger('40ms', [
    animate(ANI_FAST_TIMING, keyframes([
      style({opacity: 0, height: 0, transform: 'scale(0)', offset: 0}),
      style({opacity: 1, height: '*', transform: 'scale(1)', offset: 0.99}),
      style({height: 'auto', offset: 1.0}),
    ]))]), {optional: true}
  ),

  query(
    ':leave', stagger('-40ms', [
        style({transform: 'scale(1)', opacity: 1, height: '*'}),
        animate(ANI_FAST_TIMING, style({transform: 'scale(0)', height: 0}))
      ],
    ), {optional: true}),

  query('.gu-transit', style({
      display: 'none',
      opacity: 0,
      height: 0,
      visibility: 'hidden'
    }),
    {optional: true}
  ),
];

export const standardListAnimation = trigger('standardList', [