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

Question

我正在使用一个文本框，该文本框将使用带有 document.getElementById().innerHTML 和 document.getElementById.style 的 javascript function 在按下按钮时更改其内容。

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

我在 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;

Answer 1

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

这是工作示例：

 function insertText() { document.getElementById("text").value = "Animated Text..."; document.getElementById("text").classList.add("show"); }

 input.animation { transition: all 3s; color: #FFF; } input.show { color: #000; }

 <input type="text" class="animation" id="text"> <button onclick="insertText()">Insert Text</button>