本文整理汇总了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 })])),
),
]);
}示例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
}),
]))),
]);
}示例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
}),
]))),
]);
}示例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
}),
])))
]);
}示例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
}),
]))),
]);
}示例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 }),
]))
])
])
];
示例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 })
]))
])
]);
示例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',示例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)))
]);
示例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})
]))
])
]);