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>

Answer 1

您可以利用CSS类和transitions通过在文本更改时使元素淡入和淡出来实现此目的。我还包括另一个超时。

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>

Answer 2

改进了您的js（使用取模而不是三行条件），并创建了一个看起来很符合您要求的小动画。

let h2text = ["First h2", "Second H2"];
let counter = 0;
let h2 = document.getElementById("changeH2");
let inst = setInterval(change, 2000);

function change() {
  h2.innerHTML = h2text[counter];
  counter = (counter + 1) % h2text.length;
}

#changeH2{
  opacity: 0;
  animation: fade infinite 2s;
}

@keyframes fade{
  20%{
    opacity: 1;
  }
  80%{
    opacity: 1;
  }
}

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

Answer 3

您可以使用这样的不透明度来实现此目的

var h2text = ["First h2", "Second H2"];
var h2 = document.getElementById("changeH2");
h2.style.transition = "0.5s"; //fade speed

setTimeout(function () {
  h2.style.opacity = 0; //make text temporarily invisible
  setTimeout(function() {
    h2.innerHTML = h2text[1];
    h2.style.opacity = 1; //fade back in
  }, 500); //this timeout needs to be the same as the transition speed   
})

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

这里您不必对CSS进行任何操作。

Answer 4

用于文本转换的简单插件。

(function($) {
  let KeyWord = ["First h2", "Second H2"];
  let counter = 0;
  let Flag = true;

  function rotaterator() {
    setTimeout(function() {
      if (counter == 2) {
        counter = 0;
      }
      if (Flag) {
        Flag = false;
        counter = 1;
      }

      $("#changeH2").fadeOut(function() {
        $("#changeH2").text(KeyWord[counter]);
        counter++;
      }).fadeIn(function() {});
      rotaterator();
    }, 2000);
  }
  rotaterator();
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 id="changeH2"></h2>

设置innerHTML之间的过渡

4 个答案: