Question

我制作了一个纸牌游戏，单击按钮后，显示内容将为“正确！”或“错！”我希望显示屏闪烁，然后在几秒钟后消失，但不要重新排列其下方的内容，在本例中为#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 Transition没有jQuery；先显示然后隐藏

1 个答案: