Interactive Rating Component with HTML, CSS, and JS

Community feedback

• 

  Chenxi•210

  @Chenxi96Posted 10 months ago

  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-makPosted 10 months ago

  @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