CSS transition from/to auto values

I hope one day transitions to/from auto values will work out of the box in all major browsers. Meanwhile, read on.

Bug reports for WebKit and Firefox.

From auto

element.style.width = getComputedStyle(element).width
element.style.transition = 'width .5s ease-in-out'
element.offsetWidth // force repaint
element.style.width = '200px'

To auto

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)

That’s a lot of code for a simple transition and haven’t even covered vendor prefixes to make it work in Firefox, WebKit, IE and Opera. To automate this I use jquery.transit.

jquery.transit

jquery.transit is a jQuery plugin that provides neat JS API for creating animations using CSS transitions.

I forked jquery.transit to make it work with transitions from/to auto values.

element.transition({width: 'auto'}, 500, 'in-out')
element.transition({width: '200px'}, 500, 'in-out')

Pure CSS max-height (max-width) workaround

The most popular answer to "CSS transition height: 0; to height: auto;" question on Stackoverflow is:

Use max-height in the transformation and not height. And set a value on max-height to something bigger than your box will ever get.

#to-from-max-width {
	transition: max-width 1s ease-in-out;
}

In the example above I set max-width to 4000px. Who has such a wide screen, right?

Here goes the problem:

The width of the orange box in your browser is currently Xpx.
Transition from 160px to 4000px takes 1 second.
Transition from 160px to Xpx takes (X-160)/4000 second; animation is 4000/(X-160)× faster than expected.
Transition from Xpx to 160px is delayed for 1-((X-160)/4000) second; that’s the time to go from 4000px to Xpx which has no visible effect whatsoever.

Resize you browser window, see how values change. Narrower the window, more screwed up the animation.