javascript - 如何使网站的背景闪烁？

Question

我正在尝试创建一个函数，在您每次调用它时都会使网站闪烁。

我的做法是这样的:

function flashRed() {
  document.body.style.animation = "redflash 0.06s 2 alternate ease-out";
}

function flashGreen() {
  document.body.style.animation = "greenflash 0.06s 2 alternate ease-out"
}

@keyframes redflash {
  to {
    background-color: #FFCDD2;
  }
}
@keyframes greenflash {
  to {
    background-color: #C8E6C9;
  }
}

<input type="button" value="RED" onclick="flashRed()">
<input type="button" value="GREEN" onclick="flashGreen()">

但是这样我只能让它闪烁一次，因为动画属性是第一次设置或更改。

我如何更改我的代码，或使用不同的方法让它随心所欲地闪烁？

Answer 1

添加和删除带有超时的类...

function flashRed() {
  document.body.classList.add('red')
  window.setTimeout(function() {
    document.body.classList.remove('red')
  }, 100)

}

function flashGreen() {
  document.body.classList.add('green')
  window.setTimeout(function() {
    document.body.classList.remove('green')
  }, 100)
}

@keyframes redflash {
  to {
    background-color: #FFCDD2;
  }
}
@keyframes greenflash {
  to {
    background-color: #C8E6C9;
  }
}
.red {
  animation: redflash 0.06s 2 alternate ease-out;
}
.green {
  animation: greenflash 0.06s 2 alternate ease-out;
}

<input type="button" value="RED" onclick="flashRed()" id="red">
<input type="button" value="GREEN" onclick="flashGreen()" id="green">