Angular - How to define animation parameters default values?

Question

I am working with Angular animations, and to improve my animation, I need to use parameters. To do so, I did as this answer suggested, with interpolation.

Here is what I have for the state :

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>

And here is the error I didn't manage to solve :

ERROR Error: The animation trigger "move" has failed to build due to the following errors: - state("position", ...) must define default values for all the following style substitutions: translate_X, translate_Y, skew_X, skew_Y at InjectableAnimationEngine.AnimationEngine.registerTrigger (...)

So where and how should we define Angular animation parameters default values ?

view this: stackoverflow.com/questions/41966673/…

edu
– edu

2020-02-05 22:13:19 +00:00
Commented Feb 5, 2020 at 22:13 — edu
– edu, Commented Feb 5, 2020 at 22:13

soni · Accepted Answer · 2018-01-18 09:30:20Z

16

I'm not sure if it's too late, but the as the console says, you must add a default value for the animation and you can do it by adding

{params: {your_variable_name: 'default_value'}}

in you animation state, like this:

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

Hope it helps!

edited Jan 18, 2018 at 9:30

answered Jan 17, 2018 at 14:38

soni

7491 gold badge8 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeremy Little Over a year ago

'very' minor criticism - your example solved my problem for me, however, using the name maxHeight was a bit misleading for me. Other than that, thanks!

Collectives™ on Stack Overflow

Angular - How to define animation parameters default values?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related