jquery - 使用 css3 动画和 addClass 使点击时背景闪烁

Question

当处理一个 Action 时，我希望某个 div 闪烁绿色背景，然后淡出恢复正常。我不想加载 heave jquery UI 库。做这个的最好方式是什么？ (我知道这篇文章与其他一些文章相似，但出于某种原因我无法让它解决这个特定问题!)现在我正在尝试以下但它不起作用: http://jsfiddle.net/R8c9Z/ .

HTML:

<div id="flashMe">Click me to toggle class</div>

JS:

$("#flashMe").click(function () {
    $("#flashMe").toggleClass("flashNow");
});

CSS:

#flashMe {
  background:none;
}
.flashNow {
  animation-name: flash;
  animation-timing-function: ease-out;
  animation-duration: 2s;
}
@-webkit-keyframes flash {
  0% { background:green; }
  100% { background:none; }
}
@keyframes flash {
  0% { background:green; }
  100% { background:none; }
}

Answer 1

http://jsfiddle.net/R8c9Z/3/

document.getElementById('flashMe').onclick = function() {
    this.classList.toggle("flashNow");
});

您还遗漏了一些供应商前缀。

.flashNow {
  animation-name: flash;
  animation-timing-function: ease-out;
  animation-duration: 2s;
  -webkit-animation-name: flash;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-duration: 2s;
}
@-webkit-keyframes flash {
  from { background: green; }
  to  background: none; }
}
@keyframes flash {
  0% { background: green; }
  100% { background: none; }
}