Question

我正在编写使之成为可能的代码，以便在给元素一个类时，它会短暂闪烁。为此，我创建了一个动画，从其“突出显示”外观到其“未突出显示”外观，该动画在为元素赋予.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类）- （很难）将其整合到我现有的代码中。

Answer 1

您可以使用计时器删除.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>

即使删除了动画规则，如何完成动画？

1 个答案: