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，所以类project-info的多个div包含触发器infoSlide。这意味着当我将鼠标悬停在特定div上时，除当前悬停目标元素外，所有 project-info div都会生成动画。

我怎样才能让它只有当前悬停的元素动画？

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

感谢。

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>

Angular 2动画目前仅限于徘徊元素

1 个答案: