Open & Close Transitions with <details>

CSS interpolate-size is rad. Let's use it with the <details> element so this element can join other HTML elements in elegant presentation.

By far, the most common use case I keep seeing for interpolate-size is to transition the <details> element when it opens and closes.

This is your boilerplate starting place.

The Setup #

Start with a <details> element:

<details>
  <summary>Details interpolation example</summary>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid dolores, distinctio ipsum veritatis magni soluta maiores rerum optio, possimus animi eligendi architecto sed placeat quasi quibusdam, nihil odio. Amet, tempore.</p>
</details>

Next, it needs a max-inline-size (or placement inside a grid) to prevent the content from being as wide as the page:

details {
  inline-size: 50ch;
}

Next, add interpolate-size to the element so we can transition to block-size: auto:

details {
  @media (prefers-reduced-motion: no-preference) {
    interpolate-size: allow-keywords;
  }
}

Now the tricky parts that make this post valuable.

Select the slot of <details> with ::details-content and describe the closed styles. Take special note to transition: content-visibility 1s allow-discrete:

details {
  
  &::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip; 
    transition: content-visibility 1s allow-discrete,
                opacity 1s,
                block-size 1s;
  }
}

Lastly, add the open styles.

details {
  
  &[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}

So technically, we're not transitioning the <details> element, we're transitioning the slotted content that goes inside it.

The boilerplate #

Take this and go make awesome things!

details {
  inline-size: 50ch;
  
  @media (prefers-reduced-motion: no-preference) {
    interpolate-size: allow-keywords;
  }
  
  &::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip; 
    transition: content-visibility 1s allow-discrete,
                opacity 1s,
                block-size 1s;
  }
  
  &[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}

The Demo #

Try it on this page!

Note that this effect needs transition-behavior, ::details-content and interpolate-size to work.

Send me a link to the rad <details> elements you make with this‽