JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main"> 
    <div id="c" class="cv"> OLD </div>
</div>

CSS

.cv { 
    background-color: #eee; 
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.invisible {
    opacity: 0;
}

JavaScript

// Check if a class is set
function hasClass (e, classname) {
    return e.className.match(new RegExp('(\\s|^)' + classname + '(\\s|$)'));
}

 
// Add a class
function addClass (e, classname) {
    if (!hasClass(e, classname)) { e.className += " " + classname };
}


// Remove a class
function removeClass (e, classname) {
    if (hasClass(e, classname)) {
        var reg = new RegExp('(\\s|^)' + classname + '(\\s|$)');
        e.className = e.className.replace(reg,' ');
    }       
}


var c = document.getElementById("c");

// Transitions only happen when a property changes
addClass(c, "invisible");

// After 1.5s, change innerHTML and fade-in
setTimeout(function () {
    c.innerHTML = "Testing";
    removeClass(c, "invisible");
}, 1500);