Animated details element using ::details-content
Hi, I'm playing with the pseudo-element ::details-content. I'm trying to animate the height. When I go from the closed state to open, everything is fine. When I go from the open state to closed, the height animation of the content doesn't work. I tried applying
transition-behavior: allow-discrete; and @starting-style, but it didn't help...π Is there a way to solve this? Thanks a lot. https://codepen.io/luko248/pen/ZEXWmBX2 Replies
Try adding
content-visibility to your transition properties (and allow-discrete)
Nice! thank you, it works.