Как закончить анимацию, даже если ее правило удалено? - PullRequest
Новая
       8

Как закончить анимацию, даже если ее правило удалено?

0 голосов
/ 12 декабря 2018

Я пишу код, который делает так, чтобы когда элементу присваивался класс, он кратковременно мигал.Для этого я создал анимацию от ее «выделенного» внешнего вида до его «невыделенного» внешнего вида, который применяется, когда элементу присваивается класс .highlight.

Беда в том, что .highlight класс обычно применяется только на очень короткий момент - он удаляется задолго до окончания анимации.Результатом этого является то, что элемент будет использовать свой «невыделенный» вид сразу после удаления класса.Но моя цель состоит в том, чтобы он завершил анимацию, постепенно переходя к невыделенному виду, хотя класс, который применяет эту анимацию, был удален.

Ниже приведен код, представляющий ситуацию, с которой я имею дело.Попробуйте нажать кнопку один раз, затем нажмите ее еще раз до завершения анимации;обратите внимание, что анимация отменена и немедленно используется «невыделенный» вид. 

#foo {
  background: blue;
  color: white;
}

@keyframes unhighlight {
  from {
    background: red;
  }
  
  to {
    background: blue;
  }
}

#foo.highlight {
  animation-duration: 5s;
  animation-name: unhighlight;
}
<p id="foo">
Hello!
</p>

<button onclick="document.getElementById('foo').classList.toggle('highlight')">
Click
</button>

Поскольку на практике я пишу в контексте React, я бы предпочел не включать JavaScript в решение здесь (например, удаляя только .highlight Класс, как только он обнаружит, что анимация закончилась) - было бы трудно включить в мой существующий код (на самом деле).

1 Ответ

0 голосов
/ 12 декабря 2018

Вы можете удалить .highlight класс, используя таймер.Я понимаю, что вы не добавили тег JavaScript, но вы уже используете JavaScript для добавления и удаления класса.

См. Фрагмент ниже: 

var timer = 0;
var stopAnimation = false;
var animationTimer = 5;

function playStopAnimation(){
console.log(document.getElementById("foo").classList.contains("highlight"));
  if(document.getElementById("foo").classList.contains("highlight")){
    if(timer != animationTimer){
      stopAnimation = true;
    }else{
      document.getElementById('foo').classList.toggle('highlight');
      stopAnimation = false;
      timer = 0;
      console.log("Highlight removed");
    }    
  }else{
    document.getElementById('foo').classList.toggle('highlight');
    stopAnimationFn(animationTimer);
  }
}

const stopAnimationFn = (n)=>{
  for (let i = 1; i <= n; i++) {
      setTimeout(() =>{
        console.log(i);
        timer = i;
            if(stopAnimation && timer==animationTimer){
              document.getElementById('foo').classList.toggle('highlight');
              stopAnimation = false;
              timer = 0;
              console.log("Highlight removed");
            }
      }, i * 1000)
    }
}

    function timerSet(i) {
        setTimeout(function(){
            timer=i;
            console.log(timer);
        },1000);
    }
#foo {
  background: blue;
  color: white;
}

@keyframes unhighlight {
  from {
    background: red;
    padding-left:0;
  }
  
  to {
    background: blue;
    padding-left:500px;
  }
}

#foo.highlight {
  animation-duration: 5s;
  animation-name: unhighlight;
}
<p id="foo">
Hello!
</p>

<button onclick="playStopAnimation()">
Click
</button>
...