This content originally appeared on CSS-Tricks and was authored by Chris Coyier
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.
The post How to Animate the Details Element appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Chris Coyier | Sciencx (2021-03-02T20:58:04+00:00) How to Animate the Details Element. Retrieved from https://www.scien.cx/2021/03/02/how-to-animate-the-details-element/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.