Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive Rating Component with HTML, CSS, and JS

Ray 430

@ray-mak

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How can I get the "thank you" card to slide in after I hit the submit button? Right now it just transitions immediately. I'm trying to get it to ease in. Thanks!

Community feedback

Chenxi 210

@Chenxi96

Posted

Hi Ray,

This looks great! After looking through your code I notice that you used display none for your div#thank-you-container, unfortunately you can’t use transition with display none. There’s a work around for this but the best way is to use @keyframes. Here’s a link for reference: https://www.geeksforgeeks.org/why-transition-properties-does-not-work-with-display-properties/amp/

Marked as helpful

1

Ray 430

@ray-mak

Posted

@Chenxi96,

Thanks for the input and study resources. I was doing some research on keyframes and actually stumbled upon an easier fix. I changed the positioning of .card-container to relative and #question-container and #thank-you-container to absolute and hid the overflow. Then I changed position of the #thank-you-container. That way I can keep the display as flex and still use transitions, since changing the display ended up causing way more issues. I appreciate your help and for pointing me in the right direction. Thanks!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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