Transition height/width to `auto` by defining the transition in CSS

app.css

.expandable {
    transition-property: none;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
}

/* Vary the transition with different classes */
.expandable.molasses {
    transition-duration: 3s;
}
.expandable.robotic {
    transition-timing-function: linear;
}

script.js

function expandWidth(element) {
    var prevWidth = element.style.width,
        endWidth;
        
    // Get the element's true 'auto' width
    element.style.width = 'auto';
    endWidth = getComputedStyle(element).width;
    element.style.width = prevWidth;
    element.offsetWidth; // Force repaint
    
    // Get transition values from the CSS
    element.style.transitionProperty = 'width';
    element.style.transitionDuration = getComputedStyle(element).transitionDuration;
    element.style.transitionTimingFunction = getComputedStyle(element).transitionTimingFunction;
                               
    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);
}

This is my fork of Nikita Vasilyev's method. More about it in this blog post.