html - 如何在点击时动态添加类并在 2 秒后将其删除？

Question

我不知道如何正确地表述我的问题，所以我会在这里尝试解释一下:

在我的 Angular 7 应用程序中，我有一个带有图标作为菜单项的导航栏。

单击时，我希望他们获得某个类别，该类别必须在 2 秒后消失。

我有 7 个元素，这里以 2 个为例:

        <li class="fushia-icon">
            <a routerLink="/savoir" routerLinkActive="fushia-icon-active" class="animated"
               [class.flip]="this.iconIsClicked" (click)="iconClicked(this.iconIsClicked = true)">
            </a>
        </li>


        <li class="beige-icon">
            <a routerLink="/diplomes" routerLinkActive="beige-icon-active" class="animated"
               [class.flip]="this.iconIsClicked" (click)="iconClicked(this.iconIsClicked = true)">  
            </a>
        </li>

在我的 ts 文件中，我这样做了:

 iconClicked(icon){
        setTimeout(()=> {
            icon = false
        }, 2000)
    }

但这根本没有达到我想要的效果，因为它们都获得了类，并且 iconIsClicked 值没有返回到要分析的元素(很明显)。

我知道我可以用 7 个变量创建 7 个函数，这样每个图标都有自己的东西，但我正在寻找一种无需重复代码的更快方法。

感谢

Answer 1

您可以使用 template reference variable并添加/删除(Element.classList 方法)。

HTML

<li class="fushia-icon">
    <a #fushiaIcon class="animated" (click)="iconClicked(fushiaIcon)"></a>
</li>
<li class="beige-icon">
    <a #beigeIcon class="animated" (click)="iconClicked(beigeIcon)"></a>
</li>

TS

iconClicked(menuIcon: HTMLElement) {
    menuIcon.classList.add('flip');

    setTimeout(()=> {
        menuIcon.classList.remove('flip');
    }, 2000)
}