CSS Transition Auto HeightPage Speed Checklist
CSS Transition With A Little Help From jQuery
Enable a real CSS
transition to and from
height:auto by filling in the natural height of the element during the transition with a bit of jQuery.
There are any number of potential use cases for a transition to and from
height:auto, for example a simple expanding/collapsing menu:
Along with using CSS to animate the transition, one of the benefits of this technique is that the HTML and CSS are exactly as they would be if a native CSS transition to/from
height:auto was supported. A bit of jQuery simply fills in the element's natural height during the transition.
The exact configuration can be adjusted as needed, but most cases will include the content element to be transitioned and a clickable element, like a button, to trigger the CSS transition to
For example the expanding/collapsing menu from above:
The open and closed states, including
height values and
transition options are managed entirely in CSS - arguably as they should be - and applied with an
The clickable toggle element and the expanding element can be otherwise styled as desired, but the basic functionality includes the open and closed states and
Each CSS declaration in more detail:
visibility:hidden- Keeps visually-hidden content hidden from screen readers and keyboard navigation - an important accessibility feature.
height:0- Sets the initial value - presumably zero, but adjustable as needed.
overflow:hidden- Keeps content from appearing outside the expanding element during the CSS transition.
transition- Sets the desired animation options. The
visibilitydelay and duration of the
heighttransition should be the same.
transition-delay- Removes the
visibilitydelay for the transition from the closed state to open.
.open class(es) on click:
The HTML, CSS and jQuery we have so far expands and collapses, but the CSS
height property doesn't natively transition to the
auto value so the transition to and from the
.open state is instantaneous, rather than with the desired animated CSS transition.
A Little Razzle Dazzle
Fortunately, a little jQuery with the
transitionend event and the
.scrollHeight property can make up the difference.
Open, close and combined functions form a reusable mini-plugin:
Updated Click Function
With the special jQuery height-based open/close plugin from above in place, there's one last step. The snippet to add/remove the
.open class on click can now be updated to use the
And that's it. One small snippet of jQuery effectively enables CSS transitions to and from
height:auto for any number of use cases.
Here it is in action with a simple expanding/collapsing menu:
Although not an issue for absolutely-positioned elements, animated or not, expanding/collapsing or other potential layout shifts should be used sparingly to avoid the performance impact of content reflow.
Transitioning to and from
Lazy Loading Images
Images are often the largest resources on the page, so lazy loading is a valuable strategy to drastically reduce initial-load page weight:Lazy Load Images
On-Demand Embedded Videos
Using embedded YouTube videos? Eliminate the impact on page speed by loading embedded videos on demand:On-Demand Videos