Сброс анимации, созданной с помощью CSS, нажатием кнопки - PullRequest
Новая
       45

Сброс анимации, созданной с помощью CSS, нажатием кнопки

0 голосов
/ 11 ноября 2018

Я пытаюсь сбросить анимацию, которая уже применяется к элементу нажатием кнопки.Вот мой код, как я могу это сделать?Я попробовал некоторые, но не смог сделать это.

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);
};

здесьссылка на стек: https://stackblitz.com/edit/angular-k5soac

Ответы [ 2 ]

0 голосов
/ 11 ноября 2018

Я решил свою проблему с помощью 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>

тс код 

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
    );
  };
}

ссылка на стек: https://stackblitz.com/edit/angular-k5soac

0 голосов
/ 11 ноября 2018

Ты должен сделать 

<button onclick="myFunction();">

JavaScript: 

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