JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<body>
    <p><a href="#" onclick="return f();">click</a></p>
</body>

CSS

#id {
    -moz-transition-property: opacity;
    -moz-transition-duration: 5s;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 5s;
    opacity: 0;
}

#id.fadeIn {
    opacity: 1;
}

JavaScript

function f() {
    var a = document.createElement('a');
    a.id = 'id';
    a.innerHTML = ' fading in?';
    document.getElementsByTagName('p')[0].appendChild(a);
    // at this point I expect the span element to be with opacity=0

    var x = a.clientHeight;
    a.className = 'fadeIn';
    return false;
}