TypeScript animations.transition函數代碼示例

本文整理匯總了TypeScript中@angular/animations.transition函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript transition函數的具體用法？TypeScript transition怎麽用？TypeScript transition使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。

在下文中一共展示了transition函數的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: trigger

//-----------------------------------------------------------------------------

export const routeFadeAnimation = trigger('routeFadeAnimation', [
	transition( '* => *', [

		query(':enter',
			[
				style({ opacity: 0, position: 'absolute', height: '80%' })
			],
			{ optional: true }
		),

		query(':leave',
			[
				style({ opacity: 1 }),
				animate('0.3s', style({ opacity: 0 }))
			],
			{ optional: true }
		),

		query(':enter',
			[
				style({ opacity: 0 }),
				animate('0.3s', style({ opacity: 1 }))
			],
			{ optional: true }
		)
	])
]);

開發者ID:weltenbauer，項目名稱:home-control，代碼行數:29，代碼來源:app.animation.ts

示例2: trigger

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

export const flyIn = trigger('flyIn', [
  state('in', style({transform: 'translateX(0)'})),
  transition('void => *', [
       animate(300, keyframes([
        style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
        style({opacity: 1, transform: 'translateX(25px)',  offset: 0.3}),
        style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
      ]))
  ]),
  transition('* => void', [
        animate(300, keyframes([
        style({opacity: 1, transform: 'translateX(0)',     offset: 0}),
        style({opacity: 1, transform: 'translateX(-25px)', offset: 0.7}),
        style({opacity: 0, transform: 'translateX(100%)',  offset: 1.0})
      ]))
  ])
]);

開發者ID:RicoLiu，項目名稱:LearningAngular2，代碼行數:19，代碼來源:fly-in.ts

示例3: trigger

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


export const NotificationAnimations: {
  readonly contentFade: AnimationTriggerMetadata;
  readonly notificationState: AnimationTriggerMetadata;
} = {
  contentFade: trigger('contentFade', [
    transition(':enter', [
      style({opacity: '0'}),
      animate(`375ms cubic-bezier(0.4,0.0,0.2,1)`)
    ])
  ]),

  notificationState: trigger('state', [
    state('visible-top, visible-bottom', style({transform: 'translateY(0%)'})),
    transition('visible-top => hidden-top, visible-bottom => hidden-bottom',
      animate(`195ms cubic-bezier(0.4,0.0,1,1)`)),
    transition('void => visible-top, void => visible-bottom',
      animate(`225ms cubic-bezier(0.0,0.0,0.2,1)`)),
  ])
};

開發者ID:Yizongjishi，項目名稱:angular-material-app，代碼行數:29，代碼來源:notification.animation.ts

示例4: trigger

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

export const transformPopover: AnimationTriggerMetadata = trigger('transformPopover', [
  transition(':enter', [
    style({opacity: 0, transform: 'scale(0.3)'}),
    animate('{{openTransition}}',
      style({opacity: 1, transform: 'scale(1)'}))
  ]),
  transition(':leave', [
    animate('{{closeTransition}}',
      style({opacity: 0, transform: 'scale(0.5)'}))
  ])
]);

開發者ID:socialmedialabs，項目名稱:popover，代碼行數:20，代碼來源:popover.animations.ts

示例5: trigger

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

export const itemAnim = trigger('item', [
    state('in', style({'border-left-width' : '3px'})),
    state('out', style({'border-left-width': '8px'})),
    transition('out => hover', animate('200ms ease-in')),
    transition('hover => out', animate('200ms ease-out')),
]);

開發者ID:zichenma，項目名稱:prodinator，代碼行數:8，代碼來源:item.anim.ts

示例6: trigger

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

/**
 * Animations used by MatTooltip.
 * @docs-private
 */
export const matTooltipAnimations: {
  readonly tooltipState: AnimationTriggerMetadata;
} = {
  /** Animation that transitions a tooltip in and out. */
  tooltipState: trigger('state', [
    state('initial, void, hidden', style({opacity: 0, transform: 'scale(0)'})),
    state('visible', style({transform: 'scale(1)'})),
    transition('* => visible', animate('200ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
      style({opacity: 0, transform: 'scale(0)', offset: 0}),
      style({opacity: 0.5, transform: 'scale(0.99)', offset: 0.5}),
      style({opacity: 1, transform: 'scale(1)', offset: 1})
    ]))),
    transition('* => hidden', animate('100ms cubic-bezier(0, 0, 0.2, 1)', style({opacity: 0}))),
  ])
};

開發者ID:Nodarii，項目名稱:material2，代碼行數:30，代碼來源:tooltip-animations.ts

示例7: trigger

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

export const routerTransition = trigger('routerTransition', [
  // this will skip on load
  transition(':enter, initial => *', []),

  transition('home => examples', [
    group([
      query(':enter, :leave', style({ position: 'fixed', width: '100%' })
      , { optional: true }),
      query(':enter', [
        style({ transform: 'translateX(100%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
      ], { optional: true }),
    ])
  ]),

  transition('examples => home', [
    query(':enter, :leave', style({ position: 'fixed', width: '100%' })
    , { optional: true }),
    group([
      query(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateX(0%)' }),

開發者ID:GSA，項目名稱:sam-web-design-standards，代碼行數:31，代碼來源:router.animations.ts

示例8: trigger

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

/** Animations used by the Material drawers. */
export const matDrawerAnimations: {
  readonly transformDrawer: AnimationTriggerMetadata;
} = {
  /** Animation that slides a drawer in and out. */
  transformDrawer: trigger('transform', [
    state('open, open-instant', style({
      'transform': 'translate3d(0, 0, 0)',
      'visibility': 'visible',
    })),
    state('void', style({
      // Avoids the shadow showing up when closed in SSR.
      'box-shadow': 'none',
      'visibility': 'hidden',
    })),
    transition('void => open-instant', animate('0ms')),
    transition('void <=> open, open-instant => void',
        animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
  ])
};

開發者ID:OkBayat，項目名稱:material2，代碼行數:30，代碼來源:drawer-animations.ts

示例9: trigger

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

export const fadeInFastAnimation = trigger(
    'fadeInFastAnimation',
    [
        transition(
            ':enter', [
                style({ opacity: 0 }),
                animate(
                    '300ms',
                    style({ opacity: 1 })
                )
            ]
        )
    ]
);

開發者ID:akutch，項目名稱:kutch-codes，代碼行數:16，代碼來源:fade-in-fast-animation.ts

示例10: trigger

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

// SideNav
export const slideIn: any = trigger('slideIn', [
  state('inactive', style({ opacity: 0, transform: 'translateX(-300%)' })),
  state('active', style({ opacity: 1, transform: 'translateX(0)' })),
  transition('inactive => active', animate('500ms ease')),
  transition('active => inactive', animate('500ms ease')),
]);

export const fadeIn: any = trigger('fadeIn', [
  state('inactive', style({ opacity: 0 })),
  state('active', style({ opacity: 1 })),
  transition('inactive => active', animate('500ms ease')),
  transition('active => inactive', animate('500ms ease')),
]);

export const slideOut: any = trigger('slideOut', [
  state('inactive', style({ opacity: 0, transform: 'translateX(-300%)' })),
  state('active', style({ opacity: 1, transform: 'translateX(0)' })),
  transition('inactive => active', animate('500ms ease')),
  transition('active => inactive', animate('500ms ease')),
]);

export const flipState: any = trigger('flipState', [

  state('active', style({ transform: 'rotateY(179.9deg)' })),
  state('inactive', style({ transform: 'rotateY(0)' })),
]);

開發者ID:kumi20，項目名稱:wyprawka，代碼行數:29，代碼來源:animations.component.ts

注：本文中的@angular/animations.transition函數示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。