48

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

 4 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-height

Get the "potential" height of a hidden DOM element, that is, an element that has set display: none or hidden=true .

Mkay

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 })
})

Installation

yarn add get-height

API

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).

Limitations

It may not work reliably.

License

[email protected]


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK