Variables on Animations in Angular 2+

Question

I use some animations on my angular2+ component. It works fine but i want to use some variables instead of the hardcoded values ('20px', '10px').

Is there a possibility to use some typescript-variables at animations?

For example:

@Component({
 selector: 'animationDialog', 
 templateUrl: './animationDialog.component.html',
 styleUrls: ['./modal.component.css'], 
 animations: [
  trigger('dialog', [
   state('enter', style({
    transform: 'translate(this.TYPESCRIPTVAR1, this.TYPESCRIPTVAR2)',
    top: 'this.TYPESCRIPTVAR3',
    height: 'this.TYPESCRIPTVAR4'
  })),
('leave', style({
    transform: 'translate(this.TYPESCRIPTVAR1, this.TYPESCRIPTVAR2)',
    top: 'this.TYPESCRIPTVAR3',
    height: 'this.TYPESCRIPTVAR4'
  }))

Current Code:

animations: [
 trigger('dialog', [
  state('enter', style({
    transform: 'translate(0px, -80px)',
    top: '200px',
    height: '320px'
  }))

I've already checked another question, but this issue only treats one variable style. In my case, i've a variable style on one property (e.g. "background-color"), but these property is variable on different states.

Thanks.

Possible duplicate of angular2 animation with variable styles — zigzag
– zigzag, Commented May 11, 2017 at 14:40
@zigzag Thanks for your help. In this link, they only has one property as variable. In my case, all properties should be typescript-variables. — R. Maier
– R. Maier, Commented May 11, 2017 at 15:11
Right, but I don't see why if one style property could be referenced through a variable, they all shouldn't. — zigzag
– zigzag, Commented May 11, 2017 at 17:31
I see what you mean. For example you have two states and in both there's a variable value for background-color ( 'background-color': '*'). Which state do you reference when you've got the following property on the HTML tag: [style.background-color]="bgColor". do you reference to the background-color of the first, second or both states? — R. Maier
– R. Maier, Commented May 12, 2017 at 11:20

tellxp · Accepted Answer · 2017-05-31 10:45:58Z

2

ng2 doesn't support var in animations in 4.1.x.

answered May 31, 2017 at 10:45

tellxp

1161 silver badge6 bronze badges

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

1 Comment

Irving Over a year ago

This is now supported. stackoverflow.com/questions/41966673/…

rnacken · Accepted Answer · 2017-06-22 12:31:50Z

tellxp is right. Unfortunately, that goes for styles, but also for duration, delay and easing. These and the styles must all be regular strings or numbers.

What you should do is work with the variables in the template itself, via

[style.background-color]="yourVarHere";

Change the var in your js and take care of the animation in your CSS.

.your-selector { background-color: #333; /* your default color */ transition: 300ms background-color; } Or if you want to take care of it in your component with animations, use the style: {background-color: '*'} to read out the current color.

I hope this helps!

Collectives™ on Stack Overflow

Variables on Animations in Angular 2+

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related