是否有另一种方法可以在更改元素 html 时制作更好的动画？答案

【问题标题】：Is there another method to make better animation on changing an element html?是否有另一种方法可以在更改元素 html 时制作更好的动画？
【发布时间】：2019-04-20 14:40:45
【问题描述】：

我编写了一些代码来使用 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 秒改变一次，但是当单词改变时我想要一些效果。

【问题讨论】：

标签： javascript jquery animation settimeout

【解决方案1】：

您可以使用 CSS 为文本添加过渡效果：

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

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

【讨论】：

【解决方案2】：

我发现有些东西有用。

我只是把这个：

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

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

【讨论】：