How do you create reusable Animations in Angular 2 : <p>I'm playing with the Animation API, and I'd like to create a reusable animation like say sliding in content for top level router views. I managed to get through the funky meta data syntax (which is actually pretty cool once get past the crazy idea of using metadata) to get the animations mostly working.</p>

<pre><code>   @Component({
      //moduleId: module.id,
      selector: 'album-display',
      templateUrl: './albumDisplay.html',
      animations: [
        trigger('slideIn', [
          state('*', style({
            transform: 'translateX(100%)',
          })),
          state('in', style({
            transform: 'translateX(0)',
          })),
          state('out',   style({
            transform: 'translateX(-100%)',
          })),
          transition('* =&gt; in', animate('600ms ease-in')),
          transition('in =&gt; out', animate('600ms ease-in'))
        ])
      ]
  })
  export class AlbumDisplay implements OnInit {
      slideInState = 'in';
      ...
  }
</code></pre>

<p>And then assigning that to my top level element in the component:</p>

<pre><code>  &lt;div  class="container" [@slideIn]="slideInState"&gt;
</code></pre>

<p>So this works, but how can I make this reusable? I don't want to stick this meta data onto every view. Since this is metadata I'm not sure how you could make this reusable.</p>
