Transition not working with React useState hook and styled-component - css

Question

When I click the button the transition happens instantly. How can I add a smooth in-and-out transition? I want the whole to slide nice and smooth when buttons are in focus.
const [margin, setMargin] = useState("-100vw");
const setStyle = (margin) => {
setMargin(margin);
};
const Box = styled.span`
display: block;
width: 150vw;
margin-top: 0;
height: 0;
margin-left: ${margin};
transition: all 0.8s 0.2s ease-in-out;
`;
return (
<Box>
<Wrapper>
{children}
<p>page contents</p>
<button onMouseEnter={() => setStyle("-100vw")}>Change</button>
</Wrapper>
<TriangleLeft>
<Closer>
<button onMouseEnter={() => setStyle("0")}>Change</button>
</Closer>
</TriangleLeft>
</Box>
);
};
I am not sure if this is an issue with css or how i am handling the hooks...

Answer 1

I take a look in your code and you just need to do some changes:
Remove all styled components out of Field component, like this:
const TriangleLeft = styled.span`
....
`;
const Box = styled.span`
....
`;
const Wrapper = styled.span`
....
`;
const Closer = styled.span`
....
`;
const Field = ({ children }) => {
const [margin, setMargin] = useState("-100vw");
const setStyle = (margin) => {
setMargin(margin);
};
return .....
}
Also, in your Box style, your margin-left should be:
/* Completed Style: */
const Box = styled.span<BoxProps>`
display: block;
width: 150vw;
margin-top: 0;
height: 0;
/* Here you are getting the prop margin and setting it to margin-left */
margin-left: ${props => props.margin};
transition: all 0.8s 0.2s ease-in-out;
`;
And finally in your Box tag:
return (
// Here you are saying that Box has a custom prop named margin and setting it with margin state.
<Box margin={margin}>
<Wrapper>
{children}
.....
You can check it here.