我正试图找到一种控制CSS3 / angular 2动画的方法。
例如,从官方角度2动画文档中查看以下代码并进行一些更改:
animations: [
trigger('flyInOut', [
state('in', style({position: 'absolute', left: '15%',bottom:'15%'})),
transition('void => *', [
animate(300, keyframes([
style({opacity: 0, left: '30%', offset: 0}),
style({opacity: 1, left: '50%', offset: 0.3}),
style({opacity: 1, left:'80%', offset: 1.0})
]))
])
])
]
我的问题是,如果有任何方法可以用角度2变量控制css值。例如:
<animation leftPrec="15%" bottomPrec="15%" firstStep="30%" secondStep="60%" thirdStep="80%"></animation>
并在动画组件中:
animations: [
trigger('flyInOut', [
state('in', style({position: 'absolute', left: leftPrec,bottom:bottomPrec})),
transition('void => *', [
animate(300, keyframes([
style({opacity: 0, left: firstStep, offset: 0}),
style({opacity: 1, left: secondStep, offset: 0.3}),
style({opacity: 1, left: thirdStep, offset: 1.0})
]))
])
])
]
这个演示显然无法正常工作和编写,以说明我正在努力实现的目标。
我很想知道您是否有任何方法或建议如何实现类似的操作以控制动画关键帧属性。
答案 0 :(得分:1)
现在可以使用useAnimation();
执行可重复使用的动画export const easeInOutCubic = 'cubic-bezier(0.645, 0.045, 0.355, 1.000)';
export const zaFade = animation([
style({ opacity: ' {{ from }} ', transformOrigin: '50% 0%' }),
animate('{{ time }}',
style({ opacity: ' {{ to }} ', transform: ' {{ transform }}' }))
], { params: { time: `1000ms ${easeInOutCubic}`, from: 1, to: 0,
transform: 'translateX(0)' }}
);
然后在其他地方使用动画,您可以更改默认参数。
query('button', stagger('300ms', [
useAnimation(zaFade, { params:
{
time: `1000ms ${easeInOutCubic}`,
from: '0',
to: '1',
transform: 'translateY(0px)'}
}
)
]), { optional: true }),