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 #
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‽