Why does my styled components transitions are not working? - css

Question

I'm working on a Next.js project where the menu opens with a click on a burger button. For this I toggle a class on the button, and the styles for this class use styled-components.
When I click on the button it changes like expected, but when I add a CSS transition it's still not animated. I tested the same code in vanilla HTML and it's working well.
Where did I go wrong?
This is my code:
Burger js:
<BurgerStyled
onClick={() => setIsBurgerOpen(!isBurgerOpen)}
className={BurgerOpen}
>
<span />
<span />
<span />
</BurgerStyled>
OnClick behaviour:
const [isBurgerOpen, setIsBurgerOpen] = useState(false);
const BurgerOpen = isBurgerOpen ? "BurgerOpen" : "";
Styled component:
const BurgerStyled = styled.div`
width: 32px;
height: 21px;
position: relative;
span {
position: absolute;
left: 0;
background-color: var(--gray);
width: 100%;
height: 3px;
transition: all 0.3s ease;
&:first-child {
top: 0;
}
&:nth-child(2) {
top: calc(50% - 3px / 2);
}
&:last-child {
bottom: 0;
}
}
&.BurgerOpen span {
&:first-child {
transform: rotate(45deg);
}
&:nth-child(2) {
width: 0;
}
&:last-child {
transform: rotate(-45deg);
}
}
`;
Thanks for your answers!

Answer 1

You can pass the property to your styled component like so:
JSX:
return (
<BurgerStyled
onClick={() => setIsBurgerOpen(!isBurgerOpen)}
open={isBurgerOpen}
>
<span />
<span />
<span />
</BurgerStyled>
);
Style:
const BurgerStyled = styled(({ open, ...restProps }) => <div {...restProps} />)`
${({ open }) => open ? ` styles open here ` : ` styles closed here `};
`;
What you do here: you pass the open prop to your styled component, and then pass all other props to the div. The open prop is now available in your style template string. This prevents the open prop to be passed to the DOM-element, because a <div> DOM-element has no open property, so passing it through to the DOM would result in warnings.

Answer 2

You can try svg and transition to have the desired output. Check my sample code below, it might help you.
import { motion } from './framer-motion'; //install it with npm
const [isBurgerOpen, setIsBurgerOpen] = useState(false);
const HamburgerMenuContainer = styled.div`
display:flex;
`;
const MenuContainer = styled.div`
min-width:300px;
width:100%;
max-width:44%;
height:100%;
background-color: #fff;
box-shadow: -2px 0 2px rgba(15,15,15,0.3);
z-index:90;
position:fixed;
top:0;
right:0;
user-select:none;
padding: 1em 2.5em;
`;
const Button = styled.button`
z-index:99;
cursor:pointer;
`;
const Path = props =>{
<motion.Path fill="transparent" strokeLinecap="round" strokeWidth="3" {...props}/>
}
const transition = {duration: 0.3};
return (
<>
<HamburgerMenuContainer>
<Button onClick={() => setIsBurgerOpen(true)}>
<svg width="23" height="23" viewBox="0 0 23 23">
<Path animate={isBurgerOpen ? "open" : "closed"} initial={false} variants={{
closed: {d: "M 2 2.5 L 20 2.5",stroke:"hsl(0, 0%, 100%)"},
open: {d: "M 3 16.5 L 17 2.5",stroke:"hsl(0, 0%, 18%)"},
}}
transition={transition}
/>
<Path animate={isBurgerOpen ? "open" : "closed"} initial={false} variants={{
closed: {d: "M 2 2.5 L 20 2.5",stroke:"hsl(0, 0%, 100%)"},
open: {d: "M 3 16.5 L 17 2.5",stroke:"hsl(0, 0%, 18%)"},
}}
transition={transition}
/>
<Path animate={isBurgerOpen ? "open" : "closed"} initial={false} variants={{
closed: {d: "M 2 2.5 L 20 2.5",stroke:"hsl(0, 0%, 100%)"},
open: {d: "M 3 16.5 L 17 2.5",stroke:"hsl(0, 0%, 18%)"},
}}
transition={transition}
/>
</svg>
</Button>
</HamburgerMenuContainer>
</>
);
}

Answer 3

I could fix the problem. My Burger component was outside the header, like this:
function Header() {
const Burger = () => {
// Burger component
}
return (
<Burger />
)
}
I just put it like this and it worked:
function Header() {
return (
<BurgerStyled ...>
<span />
<span />
<span />
</BurgerStyled>
// Content header
)
}
Now the animation works, thanks for your answers!