javascript - 如何迭代无限动画并在迭代之间有延迟

Question

我希望通过在迭代之间添加延迟来迭代使用 animate css 创建的无限动画。

为了实现这一目标，我尝试了很多选择。第一个是使用纯 JavaScript

HTML

<div id="item" class=""></div>

TS

       setInterval(function(){
        document.getElementById("item").toggleClass("animated tada" }, 3000);
)

我知道这对于 Angular 来说并不理想，但这是我想到的第一种方法，但我无法解决给我的错误

Property 'toggleClass' does not exist on type 'HTMLElement'.

我环顾四周，发现这可能就是这样

        let animation = (<HTMLScriptElement> document.getElementById("animated")).toggleClass();
      }, 3000);

不幸的是，即使使用此语法，错误仍然存​​在。

所以我继续前进，我决定使用 ng-class

HTML [ngClass]="{'animated': !isAnimated, 'tada': !isAnimated}"

TS setInterval(function(){ this.isAnimated = !this.isAnimated }3000);

这会导致仅触发一次动画，导致 ng 类仅被检查一次。

关于如何实现这一目标有什么建议吗？

Answer 1

toggleClass 是 jQuery method而且你没有使用 jQuery。请改用 document.getElementById('foo').classList.toggle('myclass')。