Question

我正在尝试创建一个每次调用时闪烁网站的功能。

我的方法是这样的：

＆＃13;

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"
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何更改我的代码，或者使用其他方法让它像我想要的那样经常闪现？

Answer 1

使用超时添加和删除类...

"Message #x"

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;
}

Answer 2

每个函数执行后，您需要清除.animation。说完之后，通过清除它们，您将无法看到效果，因此您必须使用setTimeOut

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

      document.body.style.animation="";
    }

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

https://jsfiddle.net/7t1m517t/1/

Answer 3

不使用关键帧动画，只需添加/删除超时类。

这是一个可以传递课程的功能，以及你想要闪现的次数：

https://jsfiddle.net/1vzzaqvw/2/

function flash(cssClass, flashNum, delay, total) {
    if(typeof total === 'undefined') total = 1;
  if(typeof delay === 'undefined') delay = 500;
  document.body.classList.add(cssClass);
  setTimeout(function(){
    document.body.classList.remove(cssClass);
    if(total < flashNum) {
        setTimeout(function(){
            flash(cssClass, flashNum, delay, ++total);
        },delay);
    }
  },delay);
}

然后你可以调用它，即flash('red', 3)，这会使红色课程闪烁3次。

Answer 4

正如您所说，动画只能运行一次，因为已设置animation属性。要允许连续多次运行相同的动画，您可以在动画完成后清除animation属性。

有几种方法可以做到这一点，一种简单的方法是使用window.setTimeout函数。

function flashRed() {
  document.body.style.animation = "redflash 0.6s 2 alternate ease-out";
  window.setTimeout(function(){
    document.body.style.animation = "";
  }, 0600);
}

function flashGreen() {
  document.body.style.animation = "greenflash 0.6s 2 alternate ease-out";
  window.setTimeout(function(){
    document.body.style.animation = "";
  }, 0600);
}

@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()">

如何刷新网站的背景？

4 个答案: