通過單擊按鈕重置由CSS創建的動畫

Question

我試圖重置通過單擊按鈕已應用於元素的動畫。 這是我的代碼，我該怎么做？ 我嘗試了一些但沒成功。

CSS代碼

.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代碼

<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代碼

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

這是stackblitz鏈接： https ://stackblitz.com/edit/angular-k5soac

Answer 1

你應該做

<button onclick="myFunction();">

JavaScript：

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

Answer 2

我這樣使用setInterval（）解決了我的問題； 首先從元素中刪除類，然后在延遲后添加相同的類。 現在，它再次觸發相同的類。

我的CSS代碼;

.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-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代碼

<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代碼

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鏈接： https ://stackblitz.com/edit/angular-k5soac