本文整理汇总了TypeScript中@angular/animations.useAnimation函数的典型用法代码示例。如果您正苦于以下问题：TypeScript useAnimation函数的具体用法？TypeScript useAnimation怎么用？TypeScript useAnimation使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了useAnimation函数的8个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: fadeAnimationTrigger
export function fadeAnimationTrigger(params) {
return trigger('fadeAnimation', [
transition(':enter',
useAnimation(enterAnimationProps, {params: params})),
transition(':leave',
useAnimation(leaveAnimationProps, {params: params}))
]);
}示例2: trigger
export const routeFadeStateTrigger = (params) => trigger('routeFadeState',[
transition(':enter',[
useAnimation(fadeAnimation,{params:params})
]),
transition(':leave',animate(300,style({
opacity:0
})))
])示例3: animation
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 }}
);
export const slideStagger = animation([
style({ transform: '{{ from }}' }),示例4: style
style({
transform: '{{end}}'
})
)
],
{
params: {
start: 'translateX(0%)',
duration: '280ms',
end: 'translateX(100%)'
}
}
);
export const slideRtrAnimations = trigger('slideRtr', [
transition('void => *',
useAnimation(slideRightIn)
),
transition('* => void',
useAnimation(slideRightOut)
)
]);
export const slideRtlAnimations = trigger('slideRtl', [
transition('void => *',
useAnimation(slideRightIn)
),
transition('* => void',
useAnimation(slideLeftOut)
)
]);
export const slideLtlAnimations = trigger('slideLtl', [
transition('void => *',示例5: animate
animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
], {
params: {
duration: '200ms',
delay: '0ms',
opacity: '0',
scale: '1',
x: '0',
y: '0',
z: '0'
}
});
export const NavigationAnimation = [
trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),
trigger('animateStagger', [
state('50', style('*')),
state('100', style('*')),
state('200', style('*')),
transition('void => 50',
query('@*',
[
stagger('50ms', [
animateChild()
])
], {optional: true})),
transition('void => 100',
query('@*',示例6: animation
}
}
);
export const scaleOut = animation(
[
style({
transform: '{{start}}',
}),
animate('{{duration}}',
style({
transform: '{{end}}'
})
)
],
{
params: {
start: '*',
duration: '280ms',
end: 'scale(0)'
}
}
);
export const scaleAnimations = trigger('scale', [
transition('void => *',
useAnimation(scaleIn)
),
transition('* => void',
useAnimation(scaleOut)
)
]);
示例7: animation
}
);
export const expandOut = animation(
[
style({
height: '{{start}}',
overflow: 'hidden'
}),
animate('{{duration}}',
style({
height: '{{end}}'
})
)
],
{
params: {
start: '*',
duration: '280ms',
end: '0'
}
}
);
export const expandAnimations = trigger('expand', [
transition('void => *',
useAnimation(expandIn)
),
transition('* => void',
useAnimation(expandOut)
)
]);
示例8: animation
}
}
);
export const fadeout = animation(
[
style({
opacity: '{{start}}'
}),
animate('{{duration}}',
style({
opacity: '{{end}}'
})
)
],
{
params: {
start: '*',
duration: '280ms',
end: '0'
}
}
);
export const fadeAnimations = trigger('fade', [
transition('void => *',
useAnimation(fadeIn)
),
transition('* => void',
useAnimation(fadeout)
)
]);