更改文本並添加過渡以使其平滑

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>