如何通过迭代之间的延迟来迭代无限动画

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