Angular - 如何定义动画参数的默认值？

Question

我正在使用Angular动画，为了改进我的动画，我需要使用参数。为此，我使用插值进行了as this answer suggested。

以下是我对州的看法：

state('position', style({ transform: 'translateX({{translate_X}}) translateY({{translate_Y}}) skewX({{skew_X}}) skewY({{skew_Y}})' }))

component.html

<div class="iris" [@move]="{value: triggerValue, params: {translate_X: translate_X, translate_Y: translate_Y, skew_X: skew_X, skew_Y: skew_Y}}"></div>

这是我无法解决的错误：

  

错误错误：动画触发＆＃34;移动＆＃34;由于未能建立   以下错误：     - state（＆＃34; position＆＃34;，...）必须为以下所有样式替换定义默认值：translate_X，translate_Y，skew_X，   skew_Y       在InjectableAnimationEngine.AnimationEngine.registerTrigger（...）

那么我们应该在哪里以及如何定义角度动画参数默认值？

Answer 1

我不确定是否为时已晚，但正如控制台所说，您必须为动画添加默认值，您可以通过添加

来实现

{params: {your_variable_name: 'default_value'}}

在你的动画状态中，像这样：

state('in', style({height: '{{maxHeight}}px',}), {params: {maxHeight: '0'}})

希望它有所帮助！