CSS Animation Exercise (03-dropdown-menu): Replace display with visibility for dropdown menu animation #704
Description
Complete the following REQUIRED checkboxes:
- I have thoroughly read and understand The Odin Project Contributing Guide
- The title of this issue follows the
location for request: brief description of requestformat, e.g.Foundations exercises: Add exercise for XYZ
The following checkbox is OPTIONAL:
- I would like to be assigned this issue to work on it
1. Description of the Feature Request:
The dropdown menu animation exercise currently uses display: none to display: block for showing/hiding the menu, which prevents smooth CSS animations from working properly. The exercise should use visibility: hidden to visibility: visible instead, as this allows the CSS animation to work correctly while still hiding the element from view.
2. Acceptance Criteria:
- Replace
display: nonewithvisibility: hiddenin the.dropdown-menuselector - Replace
display: blockwithvisibility: visiblein the.visibleselector - Update the solution file to reflect the same changes
- Add a comment explaining why
visibilityis preferred overdisplayfor animations - Ensure the animation still works correctly with the new visibility approach
3. Additional Information:
The current implementation has a fundamental issue where display property changes cannot be animated, making the CSS animation ineffective. Using visibility instead allows the scaleY transform animation to work properly while still hiding the element when not visible. This is a common best practice for CSS animations and would improve the learning experience by demonstrating proper animation techniques.