TypeScript animations.query函数代码示例

	trigger,state,style,animate,transition,group,keyframes,query,stagger
} from '@angular/animations';

export let scaleItem = trigger('flyInOut', [
	state('small', style({ opacity: .6, transform: 'scale(1)', backgroundColor: '#faf' })),
	state('large', style({
		opacity: 1, transform: 'scale(1.2)', backgroundColor: '#eee',
	})),
	transition('small <=> large', animate('300ms ease-in', style({
		transform: 'translateY(50px)'
	})))
]);
export let listAnim = trigger('listAnimation', [
	transition('*=>*', [
		query(':enter', style({
			opacity: 0
		}), { optional: true }),
		query(':enter', stagger('200ms', [
			animate('1s ease-in', keyframes([
				style({ opacity: 0, transform: 'translateY(-77px)', offset: 0 }),
				style({ opacity: .5, transform: 'translateY(37px)', offset: .3 }),
				style({ opacity: 1, transform: 'translateY(0)', offset: 1 }),
			]))
		]), { optional: true }),
		query(':leave', stagger('200ms', [
			animate('1s ease-in', keyframes([
				style({ opacity: 1, transform: 'translateY(0px)', offset: 0 }),
				style({ opacity: .5, transform: 'translateY(37px)', offset: .3 }),
				style({ opacity: 0, transform: 'translateY(-77px)', offset: 1 }),
			]))
		]), { optional: true }),

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

export const routerTransition = trigger('routerTransition', [
    transition('* <=> *', [
        query(':enter', [
            style({
                transform: 'translateY(-1rem)',
                opacity: '0'
            }),
            animate('300ms 300ms ease-in-out', style({
                transform: 'translateY(0)',
                opacity: '1'
            })),
        ], { optional: true }),
        query(':leave', [
            style({
                opacity: '1'
            }),
            animate('300ms ease-in-out', style({
                opacity: '0'
            })),
        ], { optional: true }),
    ]),
]);

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

const queryShown = query(':enter, :leave', [
    style({ position: 'fixed', width: '100%', height: '100%' }),
], { optional: true });

// ref: https://github.com/angular/angular/issues/15477
const queryChildRoute = query('router-outlet ~ *', [
    style({}),
    animate(1, style({})),
], { optional: true });

const speed = '0.4s';

export function queryTranslate(direction: string, axis: string, from: number, to: number, zIndex: number = 1000) {
    return query(':' + direction, [
        style({ transform: 'translate' + axis + '(' + from + '%)', zIndex: zIndex, boxShadow: '0 3px 2px -2px gray' }),
        animate(speed + ' ease-in-out', style({ transform: 'translate' + axis + '(' + to + '%)' })),
    ], { optional: true });
}

export function queryTranslateX(direction: string, from: number, to: number, zIndex: number = 1000) {
    return queryTranslate(direction, 'X', from, to, zIndex);
}

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

export const fadeAnimation = trigger("fadeAnimation", [
  // The '* => *' will trigger the animation to change between any two states
  transition("* => *", [
    // The query function has three params.
    // First is the event, so this will apply on entering or when the element is added to the DOM.
    // Second is a list of styles or animations to apply.
    // Third we add a config object with optional set to true, this is to signal
    // angular that the animation may not apply as it may or may not be in the DOM.
    query(":enter", [style({ opacity: 0 })], { optional: true }),
    query(
      ":leave",
      // here we apply a style and use the animate function to apply the style over 0.3 seconds
      [style({ opacity: 1 }), animate("0.3s", style({ opacity: 0 }))],
      { optional: true }
    ),
    query(
      ":enter",
      [style({ opacity: 0 }), animate("0.3s", style({ opacity: 1 }))],
      { optional: true }
    )
  ])
]);

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

export const ANIMATE_ON_ROUTE_ENTER = 'route-enter-staggered';

export const routerTransition = trigger('routerTransition', [
  transition('* <=> *', [
    query(':enter > *', style({ opacity: 0, position: 'fixed' }), {
      optional: true
    }),
    query(':enter .' + ANIMATE_ON_ROUTE_ENTER, style({ opacity: 0 }), {
      optional: true
    }),
    sequence([
      query(
        ':leave > *',
        [
          style({ transform: 'translateY(0%)', opacity: 1 }),
          animate('0.2s ease-in-out', style({ transform: 'translateY(-3%)', opacity: 0 })),
          style({ position: 'fixed' })
        ],
        { optional: true }
      ),
      query(
        ':enter > *',
        [
          style({
            transform: 'translateY(-3%)',
            opacity: 0,
            position: 'static'
          }),
          animate('0.5s ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 }))

      transform: 'scaleY(0)',
      minWidth: '100%',
      opacity: 0
    })),
    state('showing', style({
      opacity: 1,
      minWidth: 'calc(100% + 32px)', // 32px = 2 * 16px padding
      transform: 'scaleY(1)'
    })),
    state('showing-multiple', style({
      opacity: 1,
      minWidth: 'calc(100% + 64px)', // 64px = 48px padding on the left + 16px padding on the right
      transform: 'scaleY(1)'
    })),
    transition('void => *', group([
      query('@fadeInContent', animateChild()),
      animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
    ])),
    transition('* => void', [
      animate('250ms 100ms linear', style({opacity: 0}))
    ])
  ]),

  /**
   * This animation fades in the background color and text content of the
   * select's options. It is time delayed to occur 100ms after the overlay
   * panel has transformed in.
   */
  fadeInContent: trigger('fadeInContent', [
    state('showing', style({opacity: 1})),
    transition('void => showing', [

    style({
      opacity: 1,
      transform: 'translateY(40px)'
    }),
    animate('400ms  ease-out')
  ]),
  transition('* => void', [
    animate('400ms  ease-out', style({
      opacity: 0,
      transform: 'translateY(40px)'
    }))
  ])
]);

export const routerTransition = trigger('routerTransition', [
  transition('* <=> *', [
    /* order */
    /* 1 */ query(':enter, :leave', style({ position: 'fixed', width:'100%' })
      , { optional: true }),
    /* 2 */ group([  // block executes in parallel
      query(':enter', [
        style({ transform: 'translateX(100%)' }),
        animate('0.3s ease-in-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('0.3s ease-in-out', style({ transform: 'translateX(-100%)' }))
      ], { optional: true }),
    ])
  ])
])

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


// Routable animations
export const slideInAnimation =
  trigger('routeAnimation', [
    transition('heroes <=> hero', [
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ]),
      query(':enter', [
        style({ left: '-100%'})
      ]),
      query(':leave', animateChild()),
      group([
        query(':leave', [
          animate('300ms ease-out', style({ left: '100%'}))
        ]),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%'}))
        ])
      ]),

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

export const sideAnimation = trigger('sideAnimation', [
  transition('* => *', [
    query(':enter', [
        style({
          opacity: 0
        })
      ],
      {optional: true}
    ),
    query(':leave', animate('0.4s ease-in-out', style({
        opacity: 0
      })),
      {optional: true}
    ),
    query(':enter', animate('0.4s ease-in-out', style({
        opacity: 1
      })),
      {optional: true}
    )
  ])
]);

    transition('expanded <=> collapsed, void => collapsed',
      animate(EXPANSION_PANEL_ANIMATION_TIMING)),
  ]),

  /** Animation that expands and collapses the panel header height. */
  expansionHeaderHeight: trigger('expansionHeight', [
    state('collapsed, void', style({
      height: '{{collapsedHeight}}',
    }), {
      params: {collapsedHeight: '48px'},
    }),
    state('expanded', style({
      height: '{{expandedHeight}}'
    }), {
      params: {expandedHeight: '64px'}
    }),
    transition('expanded <=> collapsed, void => collapsed', group([
      query('@indicatorRotate', animateChild(), {optional: true}),
      animate(EXPANSION_PANEL_ANIMATION_TIMING),
    ])),
  ]),

  /** Animation that expands and collapses the panel content. */
  bodyExpansion: trigger('bodyExpansion', [
    state('collapsed, void', style({height: '0px', visibility: 'hidden'})),
    state('expanded', style({height: '*', visibility: 'visible'})),
    transition('expanded <=> collapsed, void => collapsed',
      animate(EXPANSION_PANEL_ANIMATION_TIMING)),
  ])
};