Angular 8如何延迟添加/删除CSS类

Posted 2023-02-22

【中文标题】Angular 8如何延迟添加/删除CSS类

【英文标题】：Angular 8 How to add/remove CSS class with a delay

【发布时间】：2021-04-05 07:36:00

【问题描述】：

我在模板中有一个带有以下 sn-p 的角度组件

`<div class="articleContainer">
    <div class="mrFaqArticle listParent active">
        <ul class="choice">
            <li *ngFor="let intent of intents">
                <div class="bal">
                    <a class="label"(click)="selectIntent(intent)">intent.title</a>
                </div>
            </li>
        </ul>
    </div>
</div>`

组件中的以下方法使用 css 类进行简单动画

`animateIntentList() 
    document.querySelector(".mrFaqArticle").classList.remove("fadeIn", "fadeOut");
    document.querySelector(".mrFaqArticle.active").classList.add("fadeOut");
    document.querySelector(".mrFaqArticle.active").classList.remove('active');

    setTimeout(()=>
        document.querySelector(`.mrFaqArticle.$this.listParent .choice`).classList.add('stagger');
        document.querySelector(`.mrFaqArticle.$this.listParent`).classList.add('active', 'fadeIn');
    ,320);
`

有没有办法实现上述 using 指令，因为通过查询选择器访问 DOM 元素被认为是不好的做法。

【问题讨论】：

为什么是指令？ Angular 内置了相当不错的动画系统：angular.io/guide/animations

寻找使用指令的通用方法，以便可以直接使用带有过渡的 CSS 类。 Angular 动画将涉及在组件的装饰器中添加所有这些转换。

您可以完美地重复使用动画...但无论您喜欢什么...

【参考方案1】：

你考虑过使用 ngClass 还是 ngStyle 吗？

【讨论】：

是的，但是如何使用 ngClass 延迟添加类

您可以在代码 (.ts) 中更改 ngClass 的值时使用 setTimeout 添加延迟。

我已经在 ts 中使用 setTimeOut。你能解释一下吗

您好，您可以尝试使用animation-delay css 属性本身animation-delay:2s。与您一起使用animation 属性和@keyFrames Delay using css