CSS 转换编号 jQuery；先显示再隐藏

Question

我制作了一个纸牌游戏，点击按钮后显示将是 "Correct!" 或 "Wrong!" 我希望显示闪烁然后在几秒钟后消失但不要重新排列它下面的内容，在本例中是#winStreak 和#longestStreak。我不想使用 jQuery。我已经尝试将过渡添加到 CSS，但这似乎不起作用。

HTML:

<p id="displayResult"></p>
<p id="winStreak"></p>
<p id="longestStreak"></p>

CSS:

#displayResult {
  margin-bottom: 1rem;
  transition: 2s ease-in-out;
}

JavaScript:

let foldButton = document.getElementById("foldBTN")
foldButton.addEventListener("click", function(){
  if (!table[position].includes(completeHand) && !table[position].includes(completeHand2)) {
    document.getElementById("displayResult").innerHTML = "Correct!";

Answer 1

我相信你可能会使用 CSS animation:

var result = document.getElementById('displayResult');

result.addEventListener('animationend', function() {
  result.classList.remove('flashit');
});

let foldButton = document.getElementById('foldBTN');
foldButton.addEventListener('click', function() {
  result.innerHTML = 'Correct!';
  result.classList.add('flashit');
});

#displayResult {
  font-size:3rem;
  height: 1.3em;
  margin-bottom: 1rem;
  opacity: 0;
}

#displayResult.flashit {
  animation: flashit 3s;
}

@keyframes flashit {
  5% {opacity:.5}
  10% {opacity:1}
  15% {opacity:.2}
  20% {opacity:1}
  40% {opacity:1}
  100% {opacity:0}
}

<div id="displayResult"></div>
<button id="foldBTN">CLICK ME</button>

CSS 转换编号 jQuery；先显示再隐藏

CSS Transition No jQuery; Display then Hide

html

javascript

css

transition