Remix.run Logo
lelanthran 6 hours ago

> Animating the details element is tricky. By the spec, browsers don’t natively support transitions between display: none and display: block.

Very hot take; then don't animate them!

Animation in a UI is great - you draw the user's attention to a widget that changed because they might not necessarily notice it otherwise. This improves the UX.

With a details/summary, the animation is not needed and can only make a negative change to the UX. There is no positive change to the UX that animating the details/summary elements would bring. When it is opened it is obvious.

If you really really need to animate the details, instead of animating open/close, instead animate the summary background/text color to indicate that the element has just changed state.

Would I like easy animation of open/close? Sure. Does it improve the UX? Nope.