I&#39;m playing with the Animation API, and I&#39;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.

       @Component({
          //moduleId: module.id,
          selector: &#39;album-display&#39;,
          templateUrl: &#39;./albumDisplay.html&#39;,
          animations: [
            trigger(&#39;slideIn&#39;, [
              state(&#39;*&#39;, style({
                transform: &#39;translateX(100%)&#39;,
              })),
              state(&#39;in&#39;, style({
                transform: &#39;translateX(0)&#39;,
              })),
              state(&#39;out&#39;,   style({
                transform: &#39;translateX(-100%)&#39;,
              })),
              transition(&#39;* =&gt; in&#39;, animate(&#39;600ms ease-in&#39;)),
              transition(&#39;in =&gt; out&#39;, animate(&#39;600ms ease-in&#39;))
            ])
          ]
      })
      export class AlbumDisplay implements OnInit {
          slideInState = &#39;in&#39;;
          ...
      }

And then assigning that to my top level element in the component:

      &lt;div  class=&quot;container&quot; [@slideIn]=&quot;slideInState&quot;&gt;

So this works, but how can I make this reusable? I don&#39;t want to stick this meta data onto every view. Since this is metadata I&#39;m not sure how you could make this reusable.

All Angular2 Animation Solutions on Gang of Coders

Total of 1 Angular2 Animation Solutions

How do you create reusable Animations in Angular 2