TypeScript animations.transition函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了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；未经允许，请勿转载。