JSFiddle - React, Tailwind, and code Playground

by ksoncan34

HTML

<div id="big-green-box"></div>
<button id="with-transition">Go huge with transition</button>
<br>
<button id="working-no-transition">Go Normal</button>

CSS

#big-green-box {
    height: 50px;
    width: 50px;
    background-color: green;
    transition: 1s height;
}

.notransition {    
    transition: none !important; 
}

JavaScript

box = document.getElementById('big-green-box');

document.getElementById('with-transition').addEventListener('click', function () {
    box.style.height = '150px';    
});

// This will fail in all modern browsers

// This works
document.getElementById('working-no-transition').addEventListener('click', function () { 
    box.classList.add('notransition');
    box.style.height = '50px';
    box.offsetHeight;
    box.classList.remove('notransition');    
});