get-height: Get the "potential" height of a hidden DOM element

 5 years ago
source link: https://www.tuicool.com/articles/hit/iEZ7n2Q
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.


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 => {

  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>

But why asynchronous?

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.



About Joyk

Aggregate valuable and interesting links.
Joyk means Joy of geeK