本文整理匯總了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)
)
]);