My goal is to create a mobile menu that slides in from the right side when the button is clicked. While the sliding animation works well, the opening and closing of the menu happen abruptly without any transition effect. Upon inspecting the elements, I can see that the transition property is enabled but it's not having the desired effect. Here is the code snippet:
elements
function Header() {
const [burgerStatus, setBurgerStatus] = useState(false);
return (
<Nav
initial={{ y: "-100%" }}
animate={{
y: 0,
transition: {
duration: 0.5,
},
}}
>
<NavLink to="/">
<Logo src="/images/logo_name_header.svg" />
</NavLink>
<HamburgerButton onClick={() => setBurgerStatus((curr) => !curr)}>
{burgerStatus ? (
<i class="fas fa-times-circle"></i>
) : (
<i class="fas fa-bars"></i>
)}
</HamburgerButton>
<NavMenu>
<ul>
<li>
<NavLink activeclassname="acitve" to="/">
<span>Home</span>
</NavLink>
</li>
<li>
<NavLink activeclassname="acitve" to="/service">
<span>Services</span>
</NavLink>
</li>
<li>
<NavLink activeclassname="acitve" to="/about-us">
<span>About Us</span>
</NavLink>
</li>
<li>
<NavLink activeclassname="acitve" to="/contact">
<span>Contact Us</span>
</NavLink>
</li>
<li>
<NavLink activeclassname="acitve" to="/register">
<div className="cta-register">Register</div>
</NavLink>
</li>
<li>
<NavLink activeclassname="acitve" to="/login">
<span>Login</span>
</NavLink>
</li>
</ul>
</NavMenu>
{burgerStatus && (
<MobileMenu show={burgerStatus}>
<NavLink activeclassname="acitve" to="/">
<span>Home</span>
</NavLink>
<NavLink activeclassname="acitve" to="/service">
<span>Services</span>
</NavLink>
<NavLink activeclassname="acitve" to="/about-us">
<span>About Us</span>
</NavLink>
<NavLink activeclassname="acitve" to="/contact">
<span>Contact Us</span>
</NavLink>
<NavLink activeclassname="acitve" to="/register">
<span>Register</span>
</NavLink>
<NavLink activeclassname="acitve" to="/login">
<span>Login</span>
</NavLink>
</MobileMenu>
)}
</Nav>
);
}
export default Header;
styled components
const Nav = styled(motion.div)`
user-select: none;
position: sticky;
top: 0;
right: 0;
left: 0;
height: 4.375rem;
background: #fff;
display: flex;
align-items: center;
padding: 2rem 1rem;
border-bottom: 1px solid #dadce0;
z-index: 20;
@media (max-width: 480px) {
padding-inline: 0.5rem;
}
`;
const MobileMenu = styled.nav`
/* outline: 1px solid red; */
font-size: 1rem;
font-weight: 500;
font-family: "Poppins", sans-serif;
position: fixed;
height: 100vh;
inset: 0 0 0 40%;
display: flex;
flex-direction: column;
justify-content: center;
padding: min(30vh, 10rem) 2rem;
gap: 3rem;
background: hsl(0deg 0% 33% / 10%);
backdrop-filter: blur(1.5rem);
z-index: 16;
transform: ${(props) => (props.show ? "translateX(0%)" : "translateX(100%)")};
transition: transform 0.3s ease-out;
a {
text-decoration: none;
span {
letter-spacing: 0.06rem;
position: relative;
color: #000;
}
}
.active {
span {
color: #1a73e8;
}
}
@media (min-width: 700px) {
display: none;
}
`;
Please point out any mistakes in my implementation.