CSS Transition没有jQuery； 显示然后隐藏

Question

I built a card game where upon clicking a button the display will either be "Correct!" or "Wrong!" I would like the display to flash and then go away after a couple second but not rearrange the content below it, which in this case is the #winStreak and #longestStreak. I do not want to use jQuery. I have tried adding transitions to CSS, but that does not seem to work.

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

I believe you might use 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>