我希望javascript中的文本更改动画具有平滑过渡

所以我有一个h1（“你好，我是XXXXXXXX”），在span中用“问候”id包装“你好”，我每隔3秒将js中的文本更改为另一种语言的问候。它工作正常，但我希望它变化顺利，但不是突然弹出

// change text every 3 second
    var text = ["Hola", "Hallo", "Merhaba"];
    var counter = 0;
    var elem = document.getElementById("greeting");
    setInterval(change, 3000);
    function change() {
     elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { counter = 0; }
    }

如果“平稳地更改”是指平稳的过渡，比如淡出和淡入，我建议您看看jQuery和方法

动画持续时间设置为100的

change（）

函数可能如下所示：

函数更改（）{
//淡出
$（“\35;问候”）.fadeOut（100，function（）{
//递增计数器
计数器++；
如果（计数器>=text.length）{counter=0；}
//更新文本并淡入
$（“#问候语”）.text（text[计数器]）.fadeIn（100）；
})
}

对于Jquery，您可能希望先使用fadeOut（），然后使用fadeIn（）函数。 您的代码如下所示：

var text=[“你好”、“你好”、“梅尔哈巴”]；
var计数器=0；
变量元素=$（“#问候”）；
设置间隔（更改，3000）；
函数更改（）{
元素衰减（函数（）{
html（文本[计数器]）；
计数器++；
如果（计数器>=text.length）{counter=0；}
元素fadeIn（）；
});
}

您好

您只需添加一些css并使用transition属性就可以做到这一点

var greet=新数组（“Hola”、“Hallo”、“Merhaba”）；
var计数器=0；
document.getElementById（'greeting'）.innerHTML=greet[counter]；
Changegreeting1（）；
函数Changegreeting1（）{
递增索引（）
document.getElementById（'greeting1'）。innerHTML=greet[counter]；
document.getElementById（'greeting'）.style.opacity=0；
document.getElementById（'greeting1'）。style.opacity=1；
设置超时（Changegreeting，2000）；
}
函数Changegreeting（）{
递增索引（）；
document.getElementById（'greeting'）.innerHTML=greet[counter]；
document.getElementById（'greeting'）.style.opacity=1；
document.getElementById（'greeting1'）。style.opacity=0；
设置超时（ChangeGreeting12000）；
}
函数递增索引（）{
如果（计数器<长度-1）{
计数器++；
}否则{
计数器=0；
}
}

#问候语{
过渡：不透明度1s；
}
#欢迎1{
过渡：不透明度1s；
位置：绝对位置；
顶部：0px；
边际上限：0px
}

什么意思？平稳地更改它？看看，它可能就是您想要的东西。“所有2都轻松输入输出”就像css中的过渡