Question

我有以下动画：

animations: [
    trigger('moveSomething', [
        state('true', style({left: '{{leftPosition}}' , opacity: 0.5}), {params: {leftPosition: 0}}),
        transition('* => *', animate(300))
    ])
]

这是html

[@moveSomething]="{value: shouldMove, leftPosition: leftPosition}"

我肯定会触发动画，因为我看到不透明度发生了变化。我阅读了一堆关于堆栈溢出的文档和答案，但似乎看不到问题。

我想提一下leftPosition是一个整数，但是我也尝试了一个字符串形式的变量，其形式为150px，但没有成功。

有什么想法为什么不起作用？

Answer 1

所以问题是我认为我有Angular 4.2.4，但是它是4.4.7，而我试图以在4.4.6之前的方式发送参数。

最终的解决方案是

animations: [
    trigger('moveSomething', [
        state('true', style({left: '{{leftPosition}}px' , opacity: 0.5}), {params: {leftPosition: 0}}),
        transition('* => *', animate(300))
    ])
]

和HTML

[@moveSomething]="{value: shouldMove, params: {leftPosition: leftPosition}}"

具有参数的Angular 4.2.4动画不起作用

1 个答案: