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

Question

嗨，我有一个从1到无穷大的for循环，我想改变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>