转换不适用于React useState钩子和样式组件

Question

当我单击按钮时，转换立即发生。如何添加平滑的输入和输出过渡？我希望当按钮处于焦点时，整个画面能够流畅地滑动。

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>
);
};

我不确定这是否是css的问题，或者我是如何处理钩子的。。。

Answer 1

我查看了您的代码，您只需要做一些更改：

从Field组件中删除所有样式的组件，如下所示：

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 .....
}

此外，在你的Box风格中，你的左边距应该是：

/* 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;
`;

最后在你的盒子标签中：

return (
// Here you are saying that Box has a custom prop named margin and setting it with margin state.
<Box margin={margin}>
<Wrapper>
{children}
.....

你可以在这里查看。