-
-
Save tannerhodges/fcb758a0997f997a2adb3d1750023523 to your computer and use it in GitHub Desktop.
Vanilla JavaScript slideUp and slideDown functions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Slide an element down like jQuery's slideDown function using CSS3 transitions. | |
* @see https://gist.github.com/ludder/4226288 | |
* @param {element} el | |
* @param {string} timing | |
* @return {void} | |
*/ | |
function slideDown(el, timing) { | |
timing = timing || '300ms ease'; | |
// Get element height | |
el.style.webkitTransition = 'initial'; | |
el.style.transition = 'initial'; | |
el.style.visibility = 'hidden'; | |
el.style.maxHeight = 'initial'; | |
var height = el.offsetHeight + 'px'; | |
el.style.removeProperty('visibility'); | |
el.style.maxHeight = '0'; | |
el.style.overflow = 'hidden'; | |
// Begin transition | |
el.style.webkitTransition = 'max-height ' + timing + ', opacity ' + timing + ''; | |
el.style.transition = 'max-height ' + timing + ', opacity ' + timing + ''; | |
var endSlideDown = function() { | |
el.style.removeProperty('-webkit-transition'); | |
el.style.removeProperty('transition'); | |
el.removeEventListener(transitionEvent('end'), endSlideDown); | |
}; | |
requestAnimationFrame(function() { | |
el.addEventListener(transitionEvent('end'), endSlideDown); | |
el.style.maxHeight = height; | |
el.style.opacity = '1'; | |
}); | |
} | |
/** | |
* Slide an element up like jQuery's slideUp function using CSS3 transitions. | |
* @see https://gist.github.com/ludder/4226288 | |
* @param {element} el | |
* @param {string} timing | |
* @return {void} | |
*/ | |
function slideUp(el, timing) { | |
timing = timing || '300ms ease'; | |
// Get element height | |
el.style.webkitTransition = 'initial'; | |
el.style.transition = 'initial'; | |
var height = el.offsetHeight + 'px'; | |
el.style.maxHeight = height; | |
el.style.overflow = 'hidden'; | |
// Begin transition | |
el.style.webkitTransition = 'max-height ' + timing + ', opacity ' + timing + ''; | |
el.style.transition = 'max-height ' + timing + ', opacity ' + timing + ''; | |
var endSlideDown = function() { | |
el.style.removeProperty('-webkit-transition'); | |
el.style.removeProperty('transition'); | |
el.removeEventListener(transitionEvent('end'), endSlideDown); | |
}; | |
requestAnimationFrame(function() { | |
el.style.maxHeight = '0'; | |
el.style.opacity = '0'; | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
In order to support IE11, too, you should consider that
initial
doesn’t work here. Formax-height
andtransition
, I usednone
.Then it worked in IE11, too! 🎉