title: Angular 2 - Add animation handler directly on the selector
body: <p>In all the angular 2 API animation examples, the animation handler is implemented on <strong>innerHtml</strong>, </p>
  
  <p>I would like to put it directly on the component selector.</p>
  
  <p>In the example below, <code>[@visibility]="visibility"</code> is on the <code>div</code> tag, but I want it on the <code>selector: 'vps-node'</code> so my template is simply <code>&lt;ng-content&gt;</code> with out the parent div tag</p>
  
  <pre><code>@Component({
  selector: 'vps-node',
  template: `&lt;div [@visibility]="visibility"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/div&gt;`,
  animations: [
      trigger('visibility', [
          state('in', style({ transform: 'translateX(0)' })),
          transition('void =&gt; *', [
              animate(300, keyframes([
                  style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
                  style({ opacity: 1, transform: 'translateX(15px)', offset: 0.3 }),
                  style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 })
              ]))
          ]),
          transition('* =&gt; void', [
              animate(300, keyframes([
                  style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
                  style({ opacity: 1, transform: 'translateX(-15px)', offset: 0.7 }),
                  style({ opacity: 0, transform: 'translateX(100%)', offset: 1.0 })
              ]))
          ])
      ])
     ]
  })
  </code></pre>