javascript - 如何使用 Slide 组件的容器设置输入/输出动画？

Question

我希望一个组件在安装时向右执行幻灯片动画，在卸载时向左执行幻灯片动画，所有这些都使用属于“profile-slide-container”类的div作为Slide组件的容器，但是我不知道该怎么做。

这是代码：

function Main(){
  const [showProfileMenu, setShowProfileMenu] = useState(false);
  return(
    <div className="main">
      <Header />
      <div className="profile-slide-container">
      {showProfileMenu && <Slide in={true} direction={"right"}><div className="pseudo-left-section"><ProfileMenu onClick={() => setShowProfileMenu(false)} /></div></Slide>}
      </div>
      <div className="left-section">
            <div>
              <LeftSectionHeader onClick={() => setShowProfileMenu(true)} />
              <LangMenu />
            </div>
        </div>
      </div>
  );
}

Answer 1

以下是将物品移入和移出容器的正确代码。您需要创建一个包含容器元素引用的ref ，并通过prop将其传递给Slide组件。container提供容器时， Slide获取其边界矩形，然后计算要在容器边界之外平移的距离。

您可能还想overlow: 'hidden'在容器中进行设置，以便动画项目在移出容器时可以消失。

const [checked, setChecked] = React.useState(false);
const containerRef = React.useRef(null);
const handleChange = () => setChecked((prev) => !prev);

return (
  <Box sx={{ width: `calc(100px + 16px)` }}>
    <FormControlLabel
      control={<Switch checked={checked} onChange={handleChange} />}
      label="Show"
    />
    <Box
      ref={containerRef}
      style={{
        marginLeft: 130,
        backgroundColor: 'gray',
        width: 400,
        height: 200,
        overflow: 'hidden',
      }}
    >
      <Slide direction="right" in={checked} container={containerRef.current}>
        <Box sx={{ width: 50, height: 50, bgcolor: 'pink' }} />
      </Slide>
    </Box>
  </Box>
);