TypeScript animations.style函數代碼示例

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

// https://stackblitz.com/edit/zen-feedback?embed=1&file=app/app.component.ts&view=preview

export const feedbackAnimation = trigger('feedbackAnimation', [
  transition(':enter', [
    query('.zen-menu', [
      style({ opacity: 0, transform: 'translateY(30px)' }),
      animate('.3s 1s ease-in-out', style({ transform: 'translateY(0)', opacity: 1 }))
    ])
  ])
]);

export const appearBottomTopAnimation = trigger('appearBottomTop', [
  state('inactive', style({ opacity: 0, visibility: 'hidden', transform: 'translateY(30px)' })),
  state('active', style({ opacity: 1, transform: 'translateY(0)' })),
  transition('inactive <=> active', animate('.3s .5s ease-in-out'))
]);

export const appearRightLeftAnimation = trigger('appearRightLeft', [
  state('inactive', style({ opacity: 0, visibility: 'hidden', transform: 'translateX(30px)' })),
  state('active', style({ opacity: 1, transform: 'translateX(0)' })),
  transition('inactive <=> active', animate('.3s .5s ease-in-out'))
]);

  animate,
  AnimationTriggerMetadata,
  keyframes,
  state,
  style,
  transition,
  trigger,
} from '@angular/animations';

/**
 * 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.
 */
export const fadeInContent: AnimationTriggerMetadata = trigger('fadeInContent', [
  state('showing', style({ opacity: 1 })),
  transition('void => showing', [
    style({ opacity: 0 }),
    animate(`150ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)`)
  ])
]);

export const slideCalendar: AnimationTriggerMetadata = trigger('slideCalendar', [
  transition('* => left', [
    animate(180, keyframes([
      style({ transform: 'translateX(100%)', offset: 0.5 }),
      style({ transform: 'translateX(-100%)', offset: 0.51 }),
      style({ transform: 'translateX(0)', offset: 1 })
    ]))
  ]),
  transition('* => right', [

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

export const TagAnimation: AnimationTriggerMetadata = trigger('tagAnimation', [
  state('*', style({ opacity: 1, transform: 'scale(1)' })),
  transition('void => *', [
    style({ opacity: 0, transform: 'scale(0)' }),
    animate('150ms linear')
  ]),
  state('void', style({ opacity: 0, transform: 'scale(0)' })),
  transition('* => void', [
    style({ opacity: 1, transform: 'scale(1)' }),
    animate('150ms linear')
  ])
])

import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from '@angular/animations';
import { EaseOut } from '../easings';
import { IAnimationParams } from '../main';

const base: AnimationMetadata[] = [
    style({
        opacity: `{{startOpacity}}`
    }),
    animate(
        `{{duration}} {{delay}} {{easing}}`,
        style({
            opacity: `{{endOpacity}}`
        })
    )
];

const baseParams: IAnimationParams = {
    delay: '0s',
    duration: '350ms',
    easing: EaseOut.sine,
    endOpacity: 1,
    startOpacity: 0
};

const fadeIn: AnimationReferenceMetadata = animation(base, {
    params: baseParams
});

const fadeOut: AnimationReferenceMetadata = animation(base, {
    params: {
        delay: '0s',

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

export const Animations = {
    slideToggle: [
      trigger('isExpanded', [
        state('*', style({
          'height': '0',
          'overflow': 'hidden'
        })),
        state('true', style({
          'height': '*',
          'overflow': 'visible'
        })),
        transition('* => *', animate('.25s ease'))
      ])
    ]
};

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('1s', style({opacity: 1}))
    ]), { optional: true }),
    query(':leave', style({opacity: 1}), { optional: true }),
    query(':leave', stagger(100, [
      animate('1s', style({opacity: 0}))
    ]), { optional: true })
  ])
]);

/**
 * const tdRotateAnimation
 *
 * Parameter Options:
 * * degressStart: Degrees of rotation that the dom object will end up in during the "false" state
 * * degreesEnd: Degrees of rotation that the dom object will end up in during the "true" state
 * * duration: Duration the animation will run in milliseconds. Defaults to 150 ms.
 * * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.
 * * ease: Animation accelerates and decelerates. Defaults to ease-in.
 *
 * Returns an [AnimationTriggerMetadata] object with boolean states for a rotation animation.
 *
 * usage: [@tdRotate]="{ value: true | false, params: { degreesEnd: 90 }}"
 */

export const tdRotateAnimation: AnimationTriggerMetadata = trigger('tdRotate', [
  state('0', style({
    transform: 'rotate({{ degressStart }}deg)',
  }), { params: { degressStart: 0 }}),
  state('1',  style({
    transform: 'rotate({{ degreesEnd }}deg)',
  }), { params: { degreesEnd: 180 }}),
  transition('0 <=> 1', [
    group([
      query('@*', animateChild(), { optional: true }),
      animate('{{ duration }}ms {{ delay }}ms {{ ease }}'),
    ]),
  ], { params: { duration: 250, delay: '0', ease: 'ease-in' }}),
]);

ďťż// import the required animation functions from the angular animations module
import {AnimationTriggerMetadata, trigger, animate, transition, style } from '@angular/animations';

export const FadeInAnimation: AnimationTriggerMetadata =
    // trigger name for attaching this animation to an element using the [@triggerName] syntax
    trigger('FadeInAnimation', [

        // route 'enter' transition
        transition(':enter', [

            // css styles at start of transition
            style({ opacity: 0 }),

            // animation and styles at end of transition
            animate('.3s', style({ opacity: 1 }))
        ]),
    ]);