JSFiddle - React, Tailwind, and code Playground

by ainop

HTML

<div class="block"></div>

CSS

.block {
  width: 36px;
  height: 36px;
  background: hsl(36, 100%, 61%);
}

JavaScript

const element = document.querySelector('.block');

element.addEventListener('click', () => {
	toAuto(element);
});

function toAuto(element) {
  var prevWidth = element.style.width;
  element.style.width = 'auto';
  var endWidth = getComputedStyle(element).width;
  element.style.width = prevWidth;
  element.offsetWidth; // force repaint
  element.style.transition = 'width .5s ease-in-out';
  element.style.width = endWidth;
  element.addEventListener('transitionend', function transitionEnd(event) {
    if (event.propertyName == 'width') {
      element.style.transition = '';
      element.style.width = 'auto';
      element.removeEventListener('transitionend', transitionEnd, false);
    }
  }, false);
}