通过单击按钮重置使用 css 创建的动画答案

【问题标题】：Reset an animation created with css via button click通过单击按钮重置使用 css 创建的动画
【发布时间】：2019-04-14 02:55:57
【问题描述】：

我正在尝试通过单击按钮重置已应用于元素的动画。这是我的代码，我该怎么做？我尝试了一些，但无法成功。

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

【问题讨论】：

标签： javascript html css animation transform

【解决方案1】：

你应该这样做

<button onclick="myFunction();">

JavaScript：

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

【讨论】：

【解决方案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

【讨论】：