Transition Size

Utility which makes it possible to transition the width and height of elements that don’t have a fixed size applied.

Features Section titled Features

• Works with any CSS transition configuration
• Specify which dimension to observe (width, height, or both)
• Uses a ResizeObserver to detect changes in the size of the element

Installation Section titled Installation

npm install solid-transition-size

Usage Section titled Usage

The utility returns two signals: transitioning and transitionSize. transitioning can be used to know when the transition is happening, and transitionSize returns the fixed size of the element while transitioning. You have to use it to style the element you want to transition.

import createTransitionSize from 'solid-transition-size';

const Details = () => {
  const [ref, setRef] = createSignal<HTMLElement | null>(null)
  const { transitionSize } = createTransitionSize({
    element: ref,
    dimension: 'height',
  })

  const height = () => {
    if (!transitionSize()) return undefined
    return transitionSize() + 'px'
  }

  return (
    <details
      ref={setRef}
      class="transition-[height] overflow-hidden"
      style={{
        height: height(),
      }}
    >
      <summary>Show detail</summary>
      Detail
    </details>
  )
}

API reference Section titled API reference