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 (eg "background-color"), but these property is variable on different states.

Thanks.

Answer 1

ng2不支持4.1.x中的动画var。

Answer 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; } .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!