CODEWITHSUNDEEP
javascripthtmlcss
Anders Kristensen
Anders Kristensen

Reputation: 45

Change text and add transition to make it smooth

I am working with a textbox that will change its content on button-press using a javascript function with document.getElementById().innerHTML and document.getElementById.style.

The problem: I dont seem to find a solution that can change the text and add transition smoothly. I dont know how to change both the text and animate the change in the same line/same time.

I am using @keyframes in css to animate the fade.

  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;

Upvotes: 4

Views: 1870

Answers (1)

Shahnawaz Hossan
Shahnawaz Hossan

Reputation: 2720

Firstly, set the input text's color as white and transition via css. Secondly, add a class with a different color so that you can see the text animating when clicked on the button.

Here is the working example:

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>

Upvotes: 3

Related Questions