Skip to content

Instantly share code, notes, and snippets.

@patik patik/app.css
Last active Dec 22, 2015

What would you like to do?
Transition height/width to `auto` by defining the transition in 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;
function expandWidth(element) {
var prevWidth =,
// Get the element's true 'auto' width = 'auto';
endWidth = getComputedStyle(element).width; = prevWidth;
element.offsetWidth; // Force repaint
// Get transition values from the CSS = 'width'; = getComputedStyle(element).transitionDuration; = getComputedStyle(element).transitionTimingFunction; = endWidth;
element.addEventListener('transitionend', function transitionEnd(event) {
if (event.propertyName === 'width') { = ''; = 'auto';
element.removeEventListener('transitionend', transitionEnd, false);
}, false);

This comment has been minimized.

Copy link
Owner Author

patik commented Sep 6, 2013

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.