title: How do you create reusable Animations in Angular 2
body: <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>