title: Angular 2 animating currently hovered element only
body: <p>Here's the HTML:</p>
  
  <pre><code>    &lt;div *ngFor="let project of projects" (mouseenter)='toggleFocus()'&gt;
              &lt;div class="project-info"  [@infoSlide]='state'&gt;
                  &lt;p&gt;My project title here&lt;/p&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Because this is an <code>*ngFor</code>, multiple div's of class <code>project-info</code> contain the trigger <code>infoSlide</code>. This means that when I hover over a specific div, <em>all</em> <code>project-info</code> divs animate in, aside from the current hover target element.</p>
  
  <p>How can I make it so that only the currently hovered element animates?</p>
  
  <p>I know I can use CSS, but I would prefer to stick with Angular 2 animations.</p>
  
  <p>Thanks.</p>