角度2アニメーションが現在ホバー要素のみ

Question

ここではHTMLです：これは*ngForあるので

<div *ngFor="let project of projects" (mouseenter)='toggleFocus()'> 
      <div class="project-info" [@infoSlide]='state'> 
       <p>My project title here</p> 
      </div> 
     </a> 
    </div> 

、クラスproject-infoの複数のdivのは、トリガーinfoSlideが含まれています。つまり、特定のdivにカーソルを合わせると、現在のホバーのターゲット要素とは別に、すべてproject-info divsがアニメーション化されます。

現在ホバリングされた要素だけがアニメーション化されるようにするにはどうすればよいですか？

私はCSSを使うことができますが、角度2のアニメーションを使用することをお勧めします。

ありがとうございました。

Answer 1

#currentDivローカル変数を使用できます。 #currentDivをtoggleFocusメソッドに渡します。クラスを追加するか、特定のCSSを追加したばかりのdivに追加することができます。

<div *ngFor="let project of projects" #currentDiv (mouseenter)='toggleFocus(currentDiv)'> 
     <div class="project-info"[@infoSlide]='state'> 
      <p>My project title here</p> 
     </div> 
    </a> 
</div>