Material UI / React - 在父级的使用中通过超时卸载组件时淡出组件效果钩子

Question

我有一个子组件<Welcome />，我想使用Material ui fade组件添加淡出转换。我希望能够在两个条件下隐藏它：

1. 如果达到useEffect的超时
2. 如果用户单击不同的元素(在这种情况下为Pano(

我最初让我的组件控制它自己的状态逻辑，但我意识到为了使第二个条件成为可能，我需要将条件逻辑放在父级中并向下传递道具。代码为：

function App() {
const [isVisible, setIsVisible] = useState(true);
useEffect(() => {
setTimeout(() => {
setIsVisible(false);
}, 8000);
}, []);
return (
<div>
<Fade in={isVisible} exit={!isVisible}>
<Welcome setIsVisible={isVisible} isVisible={isVisible} />
</Fade>
<Pano ... />
</div>

以及要淡入/淡出的子组件：

export const Welcome = (props) => {
const shown = props.isVisible
return shown ? (
<div className="wrapper">
<img src={...} alt="welcome instructions" />
<p>Click and drag to explore.</p>
<p>Select icons for more information.</p>
</div>
) : <div />;
};

Answer 1

最终切换到Framer Motion。意识到我只是想要退出动画，因为当组件加载时，我已经对其进行了软闪烁，这样我可以在第一个关键帧上慢一点淡出。Framer的<AnimatePresence>在超时的情况下工作得很好。