TypeScript animations.keyframes函数代码示例

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

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

本文整理汇总了TypeScript中@angular/animations.keyframes函数的典型用法代码示例。如果您正苦于以下问题：TypeScript keyframes函数的具体用法？TypeScript keyframes怎么用？TypeScript keyframes使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了keyframes函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: flip

export function flip(name = 'flip', first = true, duration = 350, easing = 'ease-in-out') {
  const timings = `${duration}ms ${easing}`;
  return trigger(name, [
    state(first ? 'first' : 'second', style({ transform: `rotateY(${first ? 360 : 0}deg)`, display: 'block' })),
    state(first ? 'second' : 'first', style({ transform: `rotateY(180deg)`, display: 'none' })),
    transition(':enter', animate(0)),
    transition('* => *', animate(`${duration}ms ${easing}`)),
    transition(
      first ? 'second => first' : 'first => second',
      animate(timings, keyframes([style({ display: 'none', offset: 0 }), style({ display: 'block', offset: 0.2 })])),
    ),
  ]);
}

开发者ID:ifiske，项目名称:iFiske，代码行数:13，代码来源:flip.ts

示例2: bounce

  public static bounce(delay: number = 1000) {
    return trigger('bounce', [
      transition('* => animate', animate(delay, keyframes([

        style({
          'animation-timing-function': 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
          transform: 'translate3d(0,0,0)',
          offset: 0//from
        }),
        style({
          'animation-timing-function': 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
          transform: 'translate3d(0,0,0)',
          offset: .2//20%
        }),
        style({
          'animation-timing-function': 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
          transform: 'translate3d(0, -30px, 0)',
          offset: .4
        }),
        style({
          'animation-timing-function': 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
          transform: 'translate3d(0, -30px, 0)',
          offset: .43
        }),
        style({
          'animation-timing-function': 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
          transform: 'translate3d(0,0,0)',
          offset: .53//53%
        }),
        style({
          'animation-timing-function': 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
          transform: 'translate3d(0, -15px, 0)',
          offset: .7
        }),
        style({
          'animation-timing-function': 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
          transform: 'translate3d(0,0,0)',
          offset: .8//80%
        }),
        style({
          'animation-timing-function': 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
          transform: 'translate3d(0,0,0)',
          offset: .89//to
        }),
        style({
          transform: 'translate3d(0,-4px,0)',
          offset: .9
        }),
      ]))),
    ]);
  }

开发者ID:PoompisekK，项目名称:myWork，代码行数:51，代码来源:animate-store.ts

示例3: fadeOutLeft

  public static fadeOutLeft(delay = 500) {
    return trigger('fadeOutLeft', [
      transition(':leave', animate(delay, keyframes([
        style({
          opacity: 1,
          offset: 0
        }),

        style({
          opacity: 0,
          'transform': 'translate3d(-100%, 0, 0)',
          offset: 1
        }),
      ]))),
    ]);
  }

开发者ID:PoompisekK，项目名称:myWork，代码行数:16，代码来源:animate-store.ts

示例4: zoomOut

  public static zoomOut(delay = 300) {
    return trigger('zoomOut', [
      transition(':leave', animate(delay, keyframes([
        style({
          opacity: 1,
          offset: 0
        }),

        style({
          opacity: 0,
          'transform': 'scale3d(.3, .3, .3)',
          offset: .5
        }),
      ])))
    ]);
  }

开发者ID:PoompisekK，项目名称:myWork，代码行数:16，代码来源:animate-store.ts

示例5: fadeInRight

  public static fadeInRight(delay = 500) {
    return trigger('fadeInRight', [
      transition(':enter', animate(delay, keyframes([
        style({
          opacity: 0,
          'transform': 'translate3d(100%, 0, 0)',
          offset: 0
        }),

        style({
          opacity: 1,
          'transform': 'translate3d(0, 0, 0)',
          offset: 1
        }),
      ]))),
    ]);
  }

开发者ID:PoompisekK，项目名称:myWork，代码行数:17，代码来源:animate-store.ts

示例6: trigger

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

export const animations: any[] = [
  trigger('foolishIn', [
    transition('* => *', [
      style({ opacity: 0 }),
      animate(2000, keyframes([
        style({ opacity: 0, transformOrigin: '50% 50%',   transform: 'scale(0, 0)     rotate(360deg)', offset: 0.000 }),
        style({ opacity: 1, transformOrigin: '0% 100%',   transform: 'scale(0.5, 0.5) rotate(0deg)',   offset: 0.066 }),
        style({ opacity: 1, transformOrigin: '100% 100%', transform: 'scale(0.5, 0.5) rotate(0deg)',   offset: 0.132 }),
        style({ opacity: 1, transformOrigin: '0%',        transform: 'scale(0.5, 0.5) rotate(0deg)',   offset: 0.198 }),
        style({ opacity: 1, transformOrigin: '0% 0%',     transform: 'scale(0.5, 0.5) rotate(0deg)',   offset: 0.264 }),
        style({ opacity: 1, transformOrigin: '50% 50%',   transform: 'scale(1, 1)     rotate(0deg)',   offset: 0.330 }),
        style({ opacity: 1,                                                                            offset: 0.660 }),
        style({ opacity: 0,                                                                            offset: 1.000 }),
      ]))
    ])
  ])
];

开发者ID:iamthelogik83，项目名称:front，代码行数:19，代码来源:animations.ts

示例7: trigger

/**
 * 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', [
    animate(180, keyframes([
      style({ transform: 'translateX(-100%)', offset: 0.5 }),
      style({ transform: 'translateX(100%)', offset: 0.51 }),
      style({ transform: 'translateX(0)', offset: 1 })
    ]))
  ])
]);

开发者ID:Promact，项目名称:md2，代码行数:29，代码来源:datepicker-animations.ts

示例8: animate

        transform: `scale(1)`,
        transformOrigin: `center center`
    }),
    animate(
        `{{duration}} {{delay}} {{easing}}`,
        keyframes([
            style({
                animationTimingFunction: `ease-in`,
                offset: 0.1,
                transform: `scale(0.91)`
            }),
            style({
                animationTimingFunction: `ease-out`,
                offset: 0.17,
                transform: `scale(0.98)`
            }),
            style({
                animationTimingFunction: `ease-in`,
                offset: 0.33,
                transform: `scale(0.87)`
            }),
            style({
                animationTimingFunction: `ease-out`,
                offset: 0.45,
                transform: `scale(1)`
            })
        ])
    )
];

const heartbeatParams: IAnimationParams = {
    delay: '0s',

开发者ID:IgniteUI，项目名称:igniteui-angular，代码行数:32，代码来源:pulsate.ts

示例9: trigger

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

import * as kf from './keyframes';

export const cardAnimation = trigger('cardAnimator', [
  transition('* => wobble', animate(1000, keyframes(kf.wobble))),
  transition('* => swing', animate(1000, keyframes(kf.swing))),
  transition('* => jello', animate(1000, keyframes(kf.jello))),
  transition('* => zoomOutRight', animate(1000, keyframes(kf.zoomOutRight))),
  transition('* => slideOutLeft', animate(1000, keyframes(kf.slideOutLeft))),
  transition('* => rotateOutUpRight', animate(1000, keyframes(kf.rotateOutUpRight))),
  transition('* => flipOutY', animate(1000, keyframes(kf.flipOutY)))
]);

开发者ID:macliems，项目名称:JixyFront，代码行数:13，代码来源:card.animation.ts

示例10: trigger

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

export const fadeIn: AnimationTriggerMetadata = trigger('fadeIn', [
  state('in', style({opacity: 1})),
  transition('void => *', [
       animate(200, keyframes([
        style({opacity: 0, offset: 0}),
        style({opacity: 1, offset: 1.0})
      ]))
  ]),
  transition('* => void', [
        animate(200, keyframes([
        style({opacity: 1, offset: 0}),
        style({opacity: 0, offset: 1.0})
      ]))
  ])
]);

开发者ID:jiw0220，项目名称:jigsaw，代码行数:17，代码来源:fade-in.ts

注：本文中的@angular/animations.keyframes函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。