时间戳

首页 > 解决方案 > 如何在单击时动态添加类并在 2 秒后将其删除？

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

问题描述

我不知道如何正确地提出我的问题，所以我会在这里尝试解释自己：

在我的 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 个函数，以便每个图标都有自己的东西，但我正在寻找一种更快的方法，而无需重复代码。

感谢

标签： htmlangulartypescript

解决方案

您可以使用模板引用变量和添加/删除（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)
}

推荐阅读