CODEWITHSUNDEEP
javascriptcssreactjsanimation
Marco Ávila
Marco Ávila

Reputation: 53

React animations

I have 2 animations: one "entrance" and the other one "exit". On a click of a menu bar it opens a modal that contains an animation. But when i click again to close the "exit" animation is not resolving.

The objective is when i click on the CloseIcon i do the "exit" animation on the Box component.

After researching i came to the solution of using the following statement but it's only working for the "animation" and not working for "no-animation":

<Modal
          open={open}
          onClose={handleClose}
          className={open ? "animation" : "no-animation"}
        >

JS

import logo from "../media/logo.png";
import MenuIcon from "@mui/icons-material/Menu";
import { Button, Modal, Box } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { Link } from "react-router-dom";
import video from "../media/iguarias-video.mp4";
import InstagramIcon from "@mui/icons-material/Instagram";
import FacebookIcon from "@mui/icons-material/Facebook";
import tripadvisor from "../media/Orion_tripadvisor.svg";
const Menu: FC = () => {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  return (
    <div className="menu">
      <div className="logo">
        <Link to="/">
          <img src={logo} alt="logo" />
        </Link>
      </div>

      <div>
        <div className="menu-opener" onClick={handleOpen}>
          <Button>
            <MenuIcon />
          </Button>
        </div>
        <Modal
          open={open}
          onClose={handleClose}
          className={open ? "animation" : "no-animation"}
        >
          <Box className="modal-menu">
            <div className="menu-video">
              <video autoPlay muted loop id="my-video">
                <source src={video} type="video/mp4"></source>
              </video>
            </div>
            <div className="menu-options">
              <div onClick={handleClose} className="cancel-icon">
                <Button>
                  <CloseIcon />
                </Button>
              </div>

CSS

.animation {
  animation-name: entrance;
  animation-duration: 1s;
}
.no-animation {
  animation-name: exit;
  animation-duration: 1s;
} 
@keyframes entrance {
  from {
    left: -4000px;
  }
  to {
    left: 0px;
  }
}

@keyframes exit {
  from {
    left: 0;
  }
  to {
    left: 4000px;
  }
}

Upvotes: 0

Views: 301

Answers (1)

Liam
Liam

Reputation: 106

When you say "not resolving", I'm assuming the modal just disappears instantaneously when you close it.

Consider what happens (with regards to mounting/unmounting) when you open or close the modal. When you open it, the Modal component and its contents exist in the DOM, and so there's no reason your animation shouldn't work. But if your Modal unmounts immediately on closing, it's removed from the DOM - so there's nothing to animate.

To solve the problem, you'll have to delay the "true" closing of Modal for one second; that way, the animation will be given time to complete.

You didn't say if Modal is your own custom component or if it comes from another library. But something like react-responsive-modal could make your life easier as it handles animations for you and is accessible out of the box.

Upvotes: 1

Related Questions