Incorporating a fade out transition into my child component, <Welcome />, using Material UI's Fade component is my current goal. This transition should be triggered by two specific conditions:
- The timeout set in the useEffect function expires.
- When the user clicks on a different element (in this case, it's
Pano).
Originally, I had the component handling its own state logic. However, to address the second condition, I realized that the conditional logic needed to be moved to the parent component and passed down as props.
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>
The child component responsible for fading in/out looks like this:
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 />;
};