3

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.

Community
  • 1
  • 1
R. Maier
  • 340
  • 2
  • 13
  • Possible duplicate of [angular2 animation with variable styles](http://stackoverflow.com/questions/38464236/angular2-animation-with-variable-styles) – zigzag May 11 '17 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 May 11 '17 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 May 11 '17 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 May 12 '17 at 11:20

2 Answers2

2

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

tellxp
  • 116
  • 1
  • 6
  • 1
    This is now supported. https://stackoverflow.com/questions/41966673/parameter-in-to-animation-angular2 – Irving Feb 09 '18 at 17:01
2

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!

rnacken
  • 171
  • 5