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

Posted 2023-03-21

【中文标题】如何使用 Slide 组件的容器设置输入/输出动画？

【英文标题】：How to set in/out animations with container for the Slide component?

【发布时间】：2021-12-15 13:27:44

【问题描述】：

我想要一个组件在挂载时向右执行幻灯片动画，卸载时向左执行幻灯片动画，全部使用属于“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>
  );

【问题讨论】：

你见过this的例子吗？

是的，但他们使用 React.useRef() 之类的东西，并没有真正具体的东西。所以我有点陷入危机

【参考方案1】：

以下是将物品移入和移出容器的正确代码。 您需要创建一个 ref 来保存容器元素的引用和 通过 container 属性将其传递给 Slide 组件。提供容器时， Slide 获取它的边界矩形，然后 calculate the distance 平移到容器边界之外。

您可能还想在容器中设置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>
);

【讨论】：

哇，非常感谢！这太有用了