Angular 2只对当前悬停元素进行动画处理

Question

这是HTML代码：

这是一个段落。

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

因为这是一个 *ngFor，多个 class 为 project-info 的 div 包含触发器 infoSlide。这意味着当我悬停在特定的 div 上时，所有的 project-info div 都会动画化，除了当前悬停目标元素。

我该如何使只有当前悬停元素才能动画化？

我知道我可以使用 CSS，但我更喜欢使用 Angular 2 动画。

谢谢。

- Gary Simon

Answer 1

你可以使用一个#currentDiv本地变量。将#currentDiv传递给toggleFocus方法，你可以为刚刚悬停的div添加类或添加特定的CSS。

<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>

- Adrien Castagliola

---

但是，在这种情况下，我不能使用实际的Angular 2动画触发器，对吧？我只能够附加基于CSS的动画？ - Gary Simon