Css 转换不使用React-useState钩子和样式化组件

当我点击按钮时，转换立即发生。如何添加平滑的输入和输出转换？我希望当按钮处于焦点位置时，整个系统能够滑动自如

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

const[margin，setMargin]=useState（“-100vw”）；
常量设置样式=（边距）=>{
设定保证金（保证金）；
};
const Box=styled.span`
显示：块；
宽度：150vw；
边际上限：0；
身高：0；
左边距：${margin}；
过渡：所有0.8秒0.2秒缓进缓出；
`;
返回(
{儿童}
页面内容

设置样式（“-100vw”）}>更改
setStyle（“0”）}>更改
);
};

---

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

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

将所有样式化组件从字段组件中移除，如下所示：

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

此外，在方框样式中，左边距应为：

/*完成的样式：*/
const Box=styled.span`
显示：块；
宽度：150vw；
边际上限：0；
身高：0；
/*在这里，您将获得道具边距并将其设置为左侧边距*/
左边距：${props=>props.margin}；
过渡：所有0.8秒0.2秒缓进缓出；
`;

最后，在您的盒子标签中：

返回(
//在这里，您是说，该框有一个名为margin的自定义道具，并将其设置为margin state。
{儿童}
.....

---

您可以检查它。

沙箱中的代码与代码段中的代码不匹配。太好了！：）。请你把这个设为已回答好吗？谢谢