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

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

@Component({
  selector: 'demo-speed-dial',
  styleUrls: ['./speed-dial.component.scss'],
  animations: [
    trigger('spinInOut', [
      state('in', style({ transform: 'rotate(0)', opacity: '1' })),
      transition(':enter', [style({ transform: 'rotate(-180deg)', opacity: '0' }), animate('150ms ease')]),
      transition(':leave', [animate('150ms ease', style({ transform: 'rotate(180deg)', opacity: '0' }))])
    ]),
    trigger('preventInitialAnimation', [transition(':enter', [query(':enter', [], { optional: true })])])
  ],
  template: `
    
    <button color="primary">
      close
      edit
    </button>

    
    
      <div class="dial">
        
          </div>

export function TdHeadshakeAnimation(headshakeOptions) {
    if (headshakeOptions === void 0) { headshakeOptions = {}; }
    return trigger(headshakeOptions.anchor || 'tdHeadshake', [
        state('0', style({
            transform: 'translateX(0)',
        })),
        state('1', style({
            transform: 'translateX(0)',
        })),
        transition('0 <=> 1', [
            group([
                query('@*', animateChild(), { optional: true }),
                animate((headshakeOptions.duration || 500) + 'ms ' + (headshakeOptions.delay || 0) + 'ms', keyframes([
                    style({ transform: 'translateX(0)', offset: 0 }),
                    style({ transform: 'translateX(-6px) rotateY(-9deg)', offset: 0.065 }),
                    style({ transform: 'translateX(5px) rotateY(7deg)', offset: 0.185 }),
                    style({ transform: 'translateX(-3px) rotateY(-5deg)', offset: 0.315 }),
                    style({ transform: 'translateX(2px) rotateY(3deg)', offset: 0.435 }),
                    style({ transform: 'translateX(0)', offset: 0.50 }),
                ])),
            ]),
        ]),
    ]);
}
//# sourceMappingURL=headshake.animation.js.map

import { animate, group, query, transition, trigger } from '@angular/animations';
import { fluidAnimation } from './fluid.animation';
import { foamAnimation } from './foam.animation';
import { glassAnimation } from './glass.animation';
import { streamAnimation } from './stream.animation';
import { animationDuration } from './variables';

export const beerAnimation = trigger('beerAnimation', [
  transition('* => *', [
    group([
      query(':self', animate(animationDuration, glassAnimation)),
      query('#rectStreamFluid', [
        animate(animationDuration, streamAnimation)
      ]),
      query('#pathFoamBeer', [
        animate(animationDuration, foamAnimation)
      ]),
      query('#pathBeer', [
        animate(animationDuration, fluidAnimation)
      ]),
    ])
  ])
]);

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}
  ),
];

{ optional: true },
    ),
    query(
      ':enter > *',
      [
        style({
          transform: 'translateY(-3%)',
          opacity: 0,
          position: 'static',
        }),
        animate('0.5s ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 })),
      ],
      { optional: true },
    ),
  ]),
  query(
    ':enter .' + ROUTE_ANIMATIONS_ELEMENTS,
    stagger(100, [
      style({ transform: 'translateY(15%)', opacity: 0 }),
      animate('0.5s ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 })),
    ]),
    { optional: true },
  ),
];
const STEPS_NONE = [];
const STEPS_PAGE = [STEPS_ALL[0], STEPS_ALL[2]];
const STEPS_ELEMENTS = [STEPS_ALL[1], STEPS_ALL[3]];

export const routerTransition = trigger('routerTransition', [
  transition(isRouteAnimationsAll, STEPS_ALL),
  transition(isRouteAnimationsNone, STEPS_NONE),
  transition(isRouteAnimationsPage, STEPS_PAGE),

import { BehaviorSubject, Observable, Subscription } from 'rxjs';
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%)' })),
            ]),
        ]),
    ],
})

import {
    animate,
    query,
    style,
    transition,
    trigger,
} from "@angular/animations";
import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    animations: [
        trigger("listAnimation", [

            transition(":enter", [
                query("*", [
                    style({ opacity: 0 }),
                    animate(1000, style({ opacity: 1 }))
                ])
            ]),

            transition(":leave", [
                query("*", [
                    style({ opacity: 1 }),
                    animate(1000, style({ opacity: 0 }))
                ])

            ])
        ]),
    ],
    template: `

export function zoomOutUpOnLeaveAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
  return trigger((options && options.anchor) || 'zoomOutUpOnLeave', [
    transition(
      ':leave',
      [
        ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
        group([
          useAnimation(zoomOutUp),
          ...(!options || !options.animateChildren || options.animateChildren === 'together'
            ? [query('@*', animateChild(), { optional: true })]
            : [])
        ]),
        ...(options && options.animateChildren === 'after' ? [query('@*', animateChild(), { optional: true })] : [])
      ],
      {
        params: {
          delay: (options && options.delay) || 0,
          duration: (options && options.duration) || DEFAULT_DURATION
        }
      }
    )
  ]);
}

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

export const listAnimation = trigger('listAnim', [
  transition('* => *', [
    query(':enter', style({opacity: 0}), { optional: true }),
    query(':enter', stagger(100, [
      animate('300ms', style({opacity: 1}))
    ]), { optional: true }),
    query(':leave', style({opacity: 1}), { optional: true }),
    query(':leave', stagger(100, [
      animate('300ms', style({opacity: 0}))
    ]), { optional: true })
  ])
]);

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 */
    @ContentChildren(FloatingActionButtonComponent) buttons: QueryList;

    private _subscription: Subscription = new Subscription();