I am trying to create an infinite animation using animate css but I want to add a delay between each iteration.
After exploring various options, I first attempted to achieve this using plain JavaScript.
Here is the HTML snippet:
<div id="item" class=""></div>And here is the corresponding TypeScript code:
setInterval(function(){
document.getElementById("item").toggleClass("animated tada" }, 3000);
)
However, I encountered an error stating:
Property 'toggleClass' does not exist on type 'HTMLElement'.After further research, I tried a different approach:
let animation = (<HTMLScriptElement> document.getElementById("animated")).toggleClass();
}, 3000);
Unfortunately, the error persisted even with this syntax.
So, I shifted my focus to utilizing ng-class:
HTML
[ngClass]="{'animated': !isAnimated, 'tada': !isAnimated}"TS
setInterval(function(){ this.isAnimated = !this.isAnimated }3000);However, this only triggered the animation once because the ng class was checked only once.
Do you have any suggestions on how I can successfully achieve this?