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

最后在您的Box标记中：

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

您可以here对其进行检查。

过渡不适用于React useState钩子和样式化组件

1 个答案: