Nikita Vasilyev – pronounced as Ni·kí·ta Va·síll·ev

CSS transition from/to auto values

None of the browsers handle CSS transition from/to auto values correctly.

CSS transitions
How it supposed to be

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 = '300px'

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: '300px'}, 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 looks 4000/(X-160)× faster.
Transition from Xpx to 160px looks delayed for 1-((X-160)/4000); 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.

Published by
Nikita Vasilyev
· Updated