Design comparison
SolutionDesign
Solution retrospective
First time I tried <details> and <summary> tags, nice accordion style, but without JS, no smooth animation... or there is way to make it smooth ?
Community feedback
- @Tomi-pterPosted almost 3 years ago
I'll suggest you should add
transform: scaleY(0)
andtransition: transform 250ms ease-in-out
to thedetails p
selector andtransform: scaleY(1)
to thedetails[open] p
selector to create a drop down animation and smoothing the opening. And also check out your solution report for accessibility issues.Hope this helps 👍🏾
1@Batareika007Posted almost 3 years agoHi @Tomi-pter, Thanks for your feedback, I did what you suggest, but I use
opacity
instead =)1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord