我正在尝试制作一个简单的动画,例如下面的简单 jQuery
animate({'left' : left_indent})
我正在使用 Angular2 动画,但问题是如何将组件类外部的 left_indent 参数传递给动画触发器?
animations: [
trigger('flyInOut', [
state('for', style({
left: this.left_indent,
})),
transition('* => for', [
animate(2000, keyframes([
style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }),
]))
]),
])
]
最佳答案
现在有可能。
animations: [
trigger('flyInOut', [
state('for', style({
left: '{{left_indent}}', // use interpolation
}), {params: {left_indent: 0}}), // default parameters values required
transition('* => for', [
animate(2000, keyframes([
style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }),
]))
]),
])
]
更新(根据 SplitterAlex 的回答):
在模板中(对于 Angular < 4.4.6):
<div [@flyInOut]="{value: triggerValue, left_indent: left_indent}"></div>
对于 Angular >= 4.4.6 模板应该是
<div [@flyInOut]="{value: triggerValue, params: {left_indent: left_indent}}"></div>
关于angular - 动画 Angular2 中的参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41966673/