修改文本并添加转换效果以使其更平滑

Question

我正在使用一个文本框，通过使用一个包含 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;

- Anders Kristensen

---

展示你的 @keyframes。 - s.kuznetsov

Answer 1

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

这是一个有效的示例：

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>

- Shahnawaz Hossan