Get the "potential" height of a hidden DOM element, that is, an element that has set display: none
or hidden=true
.
This can be useful if you want to apply a CSS driven slide-down animation to a previously hidden element, as you can't have a transition from display: none
to height: auto
(obviously). For example. It was the motivation for me at any rate...
.hidden {
display: none;
}
.about-to-slide-down {
display: block;
height: 0;
overflow: hidden;
transition: height .2s ease;
}
import { getHeight } from 'get-height'
// Then at some point...
const element = document.querySelector('.hidden')
getHeight(element).then(height => {
element.classList.add('about-to-slide-down')
window.requestAnimationFrame(() => {
element.style.height = height + 'px'
})
element.addEventListener('transitionend', () => {
element.style.height = 'auto'
}, { once: true })
})
yarn add get-height
getHeight(element: HTMLElement, includeMargins: boolean = true): Promise<number>
In order to determine the height the element would have on the page, the DOM has to be temporarily rearranged a bit. This is getting scheduled in animation frames to avoid layout thrashing and the performance issues of jQuery's outerHeight()
method (also, the element will not be visible at any point).
It may not work reliably.
MIT@m3g4p0p