My latest project involves creating a sleek CSS dropdown button/menu that I am now attempting to add animation to.
Initially, the menu transitioned from display: none to display:block on hover, but I encountered issues animating it. So, I decided to switch to opacity: 0, height: 0 transitioning to opacity: 1, height: auto, however, this led to some unexpected behavior with the menu. Let me demonstrate what I mean. Here is the original menu code:
HTML:
<div className="account-dropdown">
<button className="dropbtn">
<FormattedMessage
id="header.account"
defaultMessage={`Account`} />
</button>
<div className="dropdown-content">
<a>Order History</a>
<a>Settings</a>
<a onClick={logOut}>Logout</a>
</div>
</div>
The SCSS:
.account-dropdown {
position: relative;
display: inline-block;
&:hover {
.dropdown-content {
display: block;
}
.dropbtn {
color: red;
}
}
.dropbtn {
border: none;
cursor: pointer;
margin: 2rem 1rem;
transition: all 0.3s;
color: black;
background-color: #fff;
}
.dropdown-content {
display: none;
padding: 3rem 3rem 1rem 3rem;
position: absolute;
top: 5rem;
left: -17.6rem;
background-color: #fff;
min-width: 250px;
width: 100%;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
border: solid 1px #e8e8e8;
z-index: 1;
color: rgba(0, 0, 0, 0);
transition: all 0.3s;
&:after, &:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 7px;
left: 75%;
margin-left: 26px;
}
&:before {
border-color: rgba(113, 158, 206, 0);
border-bottom-color: #e8e8e8;
border-width: 8px;
left: 75%;
margin-left: 25px;
}
a {
text-align: left;
color: black;
padding-bottom: .8rem;
text-decoration: none;
display: block;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: black;
}
&:last-child {
margin-top: .4rem;
padding-top: .8rem;
border-top: solid 1px #e8e8e8;
}
}
}
}
View the working version in this fiddle (excluding rems or SCSS vars) https://jsfiddle.net/tqf1r0mm/7/
Additionally, here's a fiddle showcasing the switch from display: none to opacity and height -> https://jsfiddle.net/tqf1r0mm/10/.
Upon observation, you'll notice that the animation is not smooth and the menu opens when hovering below the account button (instead of only opening when hovering over account). Any suggestions on resolving these issues for a polished animation outcome? Your insights would be greatly appreciated. Thank you!