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

【问题标题】：Angular 8 How to add/remove CSS class with a delayAngular 8如何延迟添加/删除CSS类
【发布时间】：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 动画将涉及在组件的装饰器中添加所有这些转换。
您可以完美地重复使用动画...但无论您喜欢什么...

标签： javascript angular angular8 angular-directive

【解决方案1】：

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

【讨论】：

是的，但是如何使用 ngClass 延迟添加类
您可以在代码 (.ts) 中更改 ngClass 的值时使用 setTimeout 添加延迟。
我已经在 ts 中使用 setTimeOut。你能解释一下吗
您好，您可以尝试使用animation-delay css 属性本身animation-delay:2s。与您一起使用animation 属性和@keyFrames Delay using css