Javascript 更改文本并添加过渡以使其平滑

我正在使用一个文本框，它将使用document.getElementById（）.innerHTML和document.getElementById.style的javascript函数在按下按钮时更改其内容

问题是：我似乎没有找到一个解决方案，可以改变文本和添加过渡顺利。我不知道如何在同一行/同一时间更改文本和动画

我在css中使用@keyframes来设置淡入淡出的动画

  document.getElementById("info-loc").innerHTML = name;
    document.getElementById("info-dev").innerHTML = age;
    document.getElementById("info-con").innerHTML = peak;
    document.getElementById("info-time").innerHTML = temp;

    var transition = "animation-name: fade; animation-duration: 1s;"
    document.getElementById("info-loc").style = transition;
    document.getElementById("info-dev").style = transition;
    document.getElementById("info-con").style = transition;
    document.getElementById("info-time").style = transition;

---

首先，将输入文本的颜色设置为白色，并通过css进行转换。 其次，添加一个具有不同颜色的类，以便在单击按钮时可以看到文本动画

以下是工作示例：

函数insertText（）{
document.getElementById（“text”）.value=“动画文本…”；
document.getElementById（“text”）.classList.add（“show”）；
}

input.animation{
过渡：所有3s；
颜色：#FFF；
}
input.show{
颜色：#000；
}

插入文本

显示@关键帧