• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript animations.transition函数代码示例

原作者: [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;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript animations.trigger函数代码示例发布时间:2022-05-28
下一篇:
TypeScript animations.style函数代码示例发布时间:2022-05-28
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap