javascript - 设置innerHTML之间的过渡

Question

需要在 innerHTML 上添加淡入淡出过渡。

我环顾四周，但没有找到解决方案来实现这一点。

我希望在 innerHTML 文本之间具有淡入淡出效果。

var h2text = ["First h2", "Second H2"];
var counter = 0;
var h2 = document.getElementById("changeH2");
var inst = setInterval(change, 2000);
function change() {
  h2.innerHTML = h2text[counter];
  counter++;
  if (counter >= h2text.length) {
    counter = 0;
  }
}

<h2 id="changeH2"></h2>

标签： javascriptjquerycss

Answer 1

您可以通过在文本更​​改时淡入和淡出元素来利用 CSS 类和过渡来执行此操作。我还包括另一个超时。

var h2text = ["First h2", "Second H2"];
var counter = 0;
var h2 = document.getElementById("changeH2");
var inst = setInterval(change, 2000);
function change() {
  h2.classList.add('fade');
  
  setTimeout(function(){
    h2.innerHTML = h2text[counter];
      h2.classList.remove('fade');
   counter++;
      if (counter >= h2text.length) {
        counter = 0;
    }  
  }, 500);
}

h2{
  transition: opacity .5s ease;
}

.fade{
  opacity: 0;
}

<h2 id="changeH2"></h2>