JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<div id="box1" style="display:block; background-color:green; position:absolute; width:400px; height:100px;" >Doesn't animate in IE, Opera, Chrome etc.. but often in FIREFOX</div>

JavaScript

window.document.addEventListener('DOMContentLoaded', function() {
    var elem = document.getElementById('box1');        
    elem.style.setProperty("-webkit-transition", "height 1s ease-in");
    elem.style.setProperty("transition", "height 1s ease-in");
    setTimeout(function() {
        elem.style.height = '400px';
    }, 10);
}, false);