How to set in/out animations with container for the Slide component?

Question

I want a component to perform the slide animation to the right when it is mounted, and to the left when it is unmounted, all using the div belonging to the "profile-slide-container" class as the container of the Slide component, but I have no idea how to do it.

Here is the code:

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

Have you seen [this](https://mui.com/components/transitions/#slide) example? — NearHuscarl, Oct 31 '21 at 11:23
Yeah, but they use things like React.useRef(), and nothing really concrete. So i'm kinda in crysis — Gigi Carti, Oct 31 '21 at 13:41

score 2 · Answer 1 · answered Oct 31 '21 at 14:19

Below is the correct code to move the item in and out of the container. You need to create a ref that holds a reference of the container element and pass it to the Slide component via the container prop. When a container is provided, Slide gets its bounding rectangle, then calculate the distance to translate outside of the container border.

You may also want to set overlow: 'hidden' in the container so the animated item can disappear when it moves outside of the container.

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

WOW THANK YOU SO MUCH! This was so useful <3 – Gigi Carti Nov 01 '21 at 14:56 — Gigi Carti, Nov 01 '21 at 14:56

How to set in/out animations with container for the Slide component?

1 Answers1