本文整理汇总了TypeScript中@angular/animations.animation函数的典型用法代码示例。如果您正苦于以下问题：TypeScript animation函数的具体用法？TypeScript animation怎么用？TypeScript animation使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了animation函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: animation
const baseParams: IAnimationParams = {
delay: "0s",
direction: "X",
duration: "800ms",
easing: EaseInOut.quad,
endAngle: 0,
endDistance: "8px",
startAngle: 0,
startDistance: "10px",
xPos: "center",
yPos: "center"
};
const shakeHor: AnimationReferenceMetadata = animation(baseRecipe, {
params: {
...baseParams,
direction: "X"
}
});
const shakeVer: AnimationReferenceMetadata = animation(baseRecipe, {
params: {
...baseParams,
direction: "Y"
}
});
const shakeTop: AnimationReferenceMetadata = animation(baseRecipe, {
params: {
...baseParams,
endAngle: 2,
endDistance: "0",示例2: style
`{{duration}} {{delay}} {{easing}}`,
style({
opacity: `{{endOpacity}}`
})
)
];
const baseParams: IAnimationParams = {
delay: '0s',
duration: '350ms',
easing: EaseOut.sine,
endOpacity: 1,
startOpacity: 0
};
const fadeIn: AnimationReferenceMetadata = animation(base, {
params: baseParams
});
const fadeOut: AnimationReferenceMetadata = animation(base, {
params: {
delay: '0s',
duration: '350ms',
easing: EaseOut.sine,
endOpacity: 0,
startOpacity: 1
}
});
export { fadeIn, fadeOut };
示例3: animation
fromPosition: 'translateY(-500px)',
startOpacity: 0,
toPosition: 'translateY(0)'
};
const baseOutParams: IAnimationParams = {
delay: '0s',
duration: '350ms',
easing: EaseIn.quad,
endOpacity: 0,
fromPosition: 'translateY(0)',
startOpacity: 1,
toPosition: 'translateY(-500px)'
};
const slideInTop: AnimationReferenceMetadata = animation(base, { params: baseInParams });
const slideInLeft: AnimationReferenceMetadata = animation(base,
{
params: {
delay: '0s',
duration: '350ms',
easing: EaseOut.quad,
endOpacity: 1,
fromPosition: 'translateX(-500px)',
startOpacity: 0,
toPosition: 'translateY(0)'
}
}
);
示例4: animation
import {animate, animation, style, transition, trigger, useAnimation} from '@angular/animations';
export const fadeIn = animation(
[
style({
opacity: '{{start}}'
}),
animate('{{duration}}',
style({
opacity: '{{end}}'
})
)
],
{
params: {
start: '0',
duration: '280ms',
end: '1'
}
}
);
export const fadeout = animation(
[
style({
opacity: '{{start}}'
}),
animate('{{duration}}',
style({
opacity: '{{end}}'
})
)
],示例5: animation
])
)
];
const blinkParams: IAnimationParams = {
delay: '0s',
duration: '.8s',
easing: 'ease-in-out',
fromScale: .2,
midScale: 1.2,
toScale: 2.2
};
const pulsateFwd = animation(pulsateBase, {
params: {
...pulsateParams
}
});
const pulsateBck = animation(pulsateBase, {
params: {
...pulsateParams,
toScale: .9
}
});
const heartbeat = animation(heartbeatBase, {
params: {
...heartbeatParams
}
});示例6: animation
export const to = {
left: { params: { to: 'translateX(-100%)'}},
right: { params: { to: 'translateX(100%)'}},
up: { params: { to: 'translateY(-100%)' }},
down: { params: { to: 'translateY(100%)' }},
};
export const from = {
left: { params: { from: 'translateX(-100%)'}},
right: { params: { from: 'translateX(100%)'}},
up: { params: { from: 'translateY(-100%)' }},
down: { params: { from: 'translateY(100%)' }},
};
export const fade = animation([
style({ opacity: '{{from}}' }),
animate('{{ time }}', style({ opacity: '{{to}}' }))
], {params: { time: defaultTime }});
export const fadeIn = useAnimation(fade, { params: { from: 0, to: 1 }});
export const fadeOut = useAnimation(fade, { params: { from: 1, to: 0 }});
export const slide = animation([
style({ transform: '{{from}}'}),
animate('{{ time }}', style({ transform: '{{to}}' })),
], {params: { time: defaultTime, to: '*', from: '*' }});
export const duration = animation(
animate('{{ time }}'), {params: { time: defaultTime }}
);
示例7: animation
startOpacity: 0,
toScale: 1,
xPos: "50%",
yPos: "50%"
};
const baseOutParams: IAnimationParams = {
...baseInParams,
easing: EaseOut.sine,
endOpacity: 0,
fromScale: 1,
startOpacity: 1,
toScale: .5
};
const scaleInCenter: AnimationReferenceMetadata = animation(base, { params: baseInParams });
const scaleInBl: AnimationReferenceMetadata = animation(base,
{
params: {
...baseInParams,
xPos: "0",
yPos: "100%"
}
}
);
const scaleInVerCenter: AnimationReferenceMetadata = animation(base,
{
params: {
...baseInParams,示例8: animation
import {animate, animation, style, transition, trigger, useAnimation} from '@angular/animations';
export const expandIn = animation(
[
style({
height: '{{start}}',
overflow: 'hidden'
}),
animate('{{duration}}',
style({
height: '{{end}}'
})
)
],
{
params: {
start: '0',
duration: '280ms',
end: '*'
}
}
);
export const expandOut = animation(
[
style({
height: '{{start}}',
overflow: 'hidden'
}),
animate('{{duration}}',
style({
height: '{{end}}'示例9: animation
import {animate, animation, style, transition, trigger, useAnimation} from '@angular/animations';
export const scaleIn = animation(
[
style({
transform: '{{start}}',
}),
animate('{{duration}}',
style({
transform: '{{end}}'
})
)
],
{
params: {
start: 'scale(0)',
duration: '280ms',
end: 'scale(1)'
}
}
);
export const scaleOut = animation(
[
style({
transform: '{{start}}',
}),
animate('{{duration}}',
style({
transform: '{{end}}'
})
)
],示例10: animation
import {
trigger,
style,
animate,
transition, animation, useAnimation
} from '@angular/animations';
const enterAnimationProps = animation([
style({opacity: 0}),
animate('{{ duration }}')
], {params: {duration: '500ms'}});
const leaveAnimationProps = animation([
animate('{{ duration }}',
style({opacity: 0}))
], {params: {duration: '500ms'}});
export function fadeAnimationTrigger(params) {
return trigger('fadeAnimation', [
transition(':enter',
useAnimation(enterAnimationProps, {params: params})),
transition(':leave',
useAnimation(leaveAnimationProps, {params: params}))
]);
}