Create a gist now

Instantly share code, notes, and snippets.

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

Embed
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 = 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);
}
@patik

This comment has been minimized.

Show comment
Hide comment
@patik

patik Sep 6, 2013

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

Owner

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