Here’s a nice simple demo from Moritz Gießmann on animating the triangle of a <details> element, which is the affordance that tells people this thing can be opened. Animating it, then is another kind of affordance that tells people this thing is opening now.
The tricks?
- Turn off the default triangle:
details summary::-webkit-details-marker { display:none; }. You can’t animate that one. - Make a replacement triangle with the CSS border trick and a pseudo element.
- Animate the new triangle when the state is open:
details[open] > summary::before { transform: rotate(90deg); }.
This only animates the triangle. The content inside still “snaps” open. Wanna smooth things out? Louis Hoebregts’ “How to Animate the Details Element Using WAAPI” covers that.
Here’s a fork where I’ll combine them just because:
I see Moritz put the cursor: pointer; on the summary as well like Greg Gibson suggests.
