javascript - 淡入 JavaScript innerHTML

Question

我的网页中有以下代码行 - demo/example .

HTML:

<button class="wrong-answer" onclick="showResult(this)">42</button>
<button class="right-answer" onclick="showResult(this)">43</button>

<p id="answer"></p>

JS:

function showResult(b) {
    var res = document.getElementById('answer');

    if (b.classList.contains('right-answer')) {
        res.innerHTML = '<span class="right">right</span>';
    } 

    else {
        res.innerHTML = '<span class="wrong">wrong</span>';
    }
} 

如何制作 <span>当选择其中一个按钮时，标 checkout 现或淡入(持续 2 秒)，显示此结果(持续 5 秒)，然后如果可能，再次将其移除(持续 2 秒)？

Answer 1

因此，这是另一个使用 vanilla JS 和 CSS3 的解决方案。我没有在代码中加入不必要的细节，因为它很简单。

function showResult(b) {
  var res = document.getElementById('answer');
  if (b.classList.contains('right-answer')) {
    res.innerHTML = '<span class="right">right</span>';
  } else {
    res.innerHTML = '<span class="wrong">wrong</span>';
  }

  res.classList.remove("hidden");
  res.classList.add("visible");
  setTimeout(function() {
   res.classList.add("hidden");
  }, 5000);
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

<button class="wrong-answer" onclick="showResult(this)">42</button>
<button class="right-answer" onclick="showResult(this)">43</button>
<p id="answer" class="hidden"></p>