Odtnhj

I am trying to reset an animation which is already applied to an element with button click. Here is my code, how can I do that? I tried some but couldn't make it.

css code

.slide-in-left 
 -webkit-animation:slide-in-left .5s cubic-bezier(.25,.46,.45,.94) both;
 animation:slide-in-left .5s cubic-bezier(.25,.46,.45,.94) both


@-webkit-keyframes slide-in-left
 0% 
 -webkit-transform:translateX(-1000px);
 transform:translateX(-1000px);
 opacity:0
 
 100% 
 -webkit-transform:translateX(0);
 transform:translateX(0);
 opacity:1
 


@keyframes slide-in-left 
 0% 
 -webkit-transform:translateX(-1000px);
 transform:translateX(-1000px);
 opacity:0
 
 100% 
 -webkit-transform:translateX(0);
 transform:translateX(0);
 opacity:1
 

html code

<div class="slide-in-left" style="background-color: green" id="myDIV">
 <p>totalCash</p>
</div>
<button (click)="sumCash(cashInput.value); cashInput.value=''" >Add</button>

js code

sumCash() 
 this.totalCash += parseInt(this.cash);
;

here is stackblitz link:
https://stackblitz.com/edit/angular-k5soac

I solved my problem by using setInterval() like this;
first removed class from element, after that added same class with some delay. Now it triggers the same class again.

my css code;

.slide-in-left
 -webkit-animation:slide-in-left .5s cubic-bezier(.25,.46,.45,.94) both;
 animation:slide-in-left .5s cubic-bezier(.25,.46,.45,.94) both;
 background-color: green;


@-webkit-keyframes slide-in-left0%-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0100%-webkit-transform:translateX(0);transform:translateX(0);opacity:1@keyframes slide-in-left0%-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0100%-webkit-transform:translateX(0);transform:translateX(0);opacity:1

html code

<p>Cash</p><input #cashInput placeholder="Add cash" [(ngModel)]="cash">
<div class="slide-in-left" id="myDiv">
<p>totalCash</p>
</div>
<button (click)="sumCash(cashInput.value); cashInput.value=''" onclick="sumCash($event);">Add</button>

ts code

import Component from '@angular/core';

@Component(
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
)
export class AppComponent 
 public cash: string = "0";
 public totalCash: number = 0;

 sumCash() 
 this.totalCash += parseInt(this.cash);
 this.cash = "0";

 var divItem = document.getElementById("myDiv");
 divItem.classList.remove("slide-in-left");

 var interval = setInterval(
 function() 
 divItem.classList.add("slide-in-left");
 , 1
 );
 ;

stackblitz link:
https://stackblitz.com/edit/angular-k5soac

You shall do

<button onclick="myFunction();">

JavaScript:

function myFunction() 
 //or any other selector like 'getElementBy'...
 var demo = document.querySelector('#myElement');
 demo.style.animation="none";
;