-
-
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'; | |
}); | |
} |
In order to support IE11, too, you should consider that initial
doesn’t work here. For max-height
and transition
, I used none
.
Then it worked in IE11, too! 🎉
there is a link to the demo?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How do you deal when "transitionEvent" is not a function due Browser Support?