还有另一种方法可以在更改元素html时制作更好的动画吗？

Question

我创建了一些代码来使用setTimeout（）更改元素HTML。

是否有可能采取其他方式制作更漂亮的动画，就像元素慢慢出现一样？

我用setInterval（）绑定，我尝试使用fadeIn（），但我不知道如何处理它。

var words= [' Web', ' Fullstack', ' Mobile', ' Php'];

var i = 0;

var word = document.getElementById("word");

function newWord(){
    word.innerHTML = words[i];

    if(i < words.length - 1){
        i++;
    }
    else{
        i = 0;
    }

    setTimeout("newWord()", 2000);

    }

    window.onload = function(){
        newWord();
    }

像这样它的作品，这个词每2秒改变一次，但是当这个词改变时我想要一些效果。

Answer 1

您可以使用CSS添加到文本的转换：

#word {
  transition: transition-length linear all;
}

这会为您使用JavaScript更改的每个样式元素创建一个过渡

Answer 2

我觉得有些东西有效。

我只想说：

$('#word').fadeOut(2000, function(){ $('#word').fadeIn(2000);});

在其他之后它工作得很好。