如何在迭代之间延迟的情况下迭代无限动画

Question

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

为了达到这个目的，我尝试了许多选择。 第一个是使用普通的javascript

HTML

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

TS

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

我知道这对角度不理想，但这是我想到的第一种方法，但是我无法解决给我的错误

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方法 ，您没有使用jQuery。 请改用document.getElementById('foo').classList.toggle('myclass') 。