title: Angular 4 Animations add parameters
body: <p>Here is a random animation I've made</p>
  
  <pre><code>    import { trigger, animate, transition, style, keyframes} from '@angular/animations';
  
      export const customAnimation=
          trigger('customAnimation', [
              transition(':leave', [
                  style({position: 'relative'}),
                  animate("250ms ease-in", keyframes([
                      style({top: 0}),
                      style({top: -300}),
                  ]))
              ])
          ])
  </code></pre>
  
  <p>I am then importing it into my components. (<code>animations: [customAnimation]</code>
  )
  However, I'd like to use the new arguments features :
  (<a href="http://sudheerjonna.com/blog/2017/06/30/angular-4-2-release-an-improved-version-for-animation-package/" rel="noreferrer">http://sudheerjonna.com/blog/2017/06/30/angular-4-2-release-an-improved-version-for-animation-package/</a>).</p>
  
  <p>By instance, the -300 would become a parameter, and I would call it on me template elements by doing :</p>
  
  <pre><code>&lt;div [@customAnimation]="{pixels: -300}"&gt;
  </code></pre>
  
  <p>Since I don't want to use <code>animation()</code> and <code>useAnimation()</code> as I want to use on specific dom element (not using a <code>query()</code> either) I simply didn't manage to do it. </p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Got it working with :</p>
  
  <pre><code>export const leavingTowardsTop=
      trigger('leavingTowardsTop', [
          transition(':leave', [
              style({position: 'relative'}),
              animate("250ms ease-in", keyframes([
                  style({top: 0}),
                  style({top: "{{pixels}}"})
              ]))
          ], {params : { pixels: "-30px" }})
      ])
  </code></pre>
  
  <p>only issue, I can't specify another value than the default one (-30). I tried :</p>
  
  <pre><code>[@leavingTowardsTop]="{params : { pixels: '-300px' }}"
  </code></pre>
  
  <p>and</p>
  
  <pre><code>[@leavingTowardsTop]="{ pixels: '-300px' }"
  </code></pre>
  
  <p>I also tried not specifying the <code>'</code> or <code>px</code> but it still takes 30px</p>