title: Variables on Animations in Angular 2+
body: <p>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'). </p>
  
  <p>Is there a possibility to use some typescript-variables at animations?</p>
  
  <p>For example: </p>
  
  <pre><code>@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'
    }))
  </code></pre>
  
  <p>Current Code:     </p>
  
  <pre><code>animations: [
   trigger('dialog', [
    state('enter', style({
      transform: 'translate(0px, -80px)',
      top: '200px',
      height: '320px'
    }))
  </code></pre>
  
  <p>I've already checked another <a href="https://stackoverflow.com/questions/38464236/angular2-animation-with-variable-styles">question</a>, 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. </p>
  
  <p>Thanks.</p>