for循环函数内部的嵌套函数 添加/删除类| 关键帧动画

Question

嗨，我有一个for循环，它从1开始计数到无穷大，我想更改div的背景，并且每次更新“ p”的颜色。 它在我执行一次循环时有效（意味着第一次更改，但第二次不播放动画。（数字不断更新）

   <div class="section" id="box">
      <p id="demo">23375</p>
  </div>

我的CSS

.section {
  background-color: blue;
  margin: 1rem;
}

.pargraph-active,
.colorTransition {
  animation: colorTransition 2s ease-in-out;
}

@keyframes colorTransition {
  0% {
    background-color: blue;
  50% {
    color: white
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

和JS

let box = document.querySelector('#box');
let demo = document.querySelector('#demo');

function runAnimation() {
  box.classList.add('colorTransition');
  demo.classList.add('pargraph-active');
  console.log(`Animation started`);
}

function initialState() {
  box.classList.remove('colorTransition');
  demo.classList.remove('pargraph-active');
  console.log(`Initial State`);
}

(function theLoop(i) {
  setTimeout(
    function() {
      demo.innerHTML = i;
      if (i++) {
        theLoop(i);
      }
      runAnimation();
    },
    2000,
    initialState()
  );
})(1);

Answer 1

@keyframe语法中有错误，缺少}和; 上色后。

我对其进行了修复，现在可以使用，但是我建议您仅使用css代替。

这样的事情会做

animation: colorTransition 2s ease-in-out infinite; 

 let box = document.querySelector('#box'); let demo = document.querySelector('#demo'); function runAnimation() { box.classList.add('colorTransition'); demo.classList.add('pargraph-active'); console.log(`Animation started`); } function initialState() { box.classList.remove('colorTransition'); demo.classList.remove('pargraph-active'); console.log(`Initial State`); } (function theLoop(i) { setTimeout( function() { demo.innerHTML = i; if (i++) { theLoop(i); } runAnimation(); }, 2000, initialState() ); })(1); 

 .section { margin: 1rem; background-color: blue; } .pargraph-active, .colorTransition { animation: colorTransition 2s ease-in-out; } @keyframes colorTransition { 0% { background-color: blue; } 50% { color: white; background-color: red; } 100% { background-color: blue; } } 

  <div class="section " id="box"> <p id="demo">23375</p> </div>