反应动画

Question

我有 2 个动画：一个“入口”，另一个“退出”。单击菜单栏时，它会打开一个包含动画的模式。但是当我再次单击以关闭“退出”动画时没有解决。

目标是当我单击 CloseIcon 时，我在 Box 组件上执行“退出”动画。

经过研究，我得出了使用以下语句的解决方案，但它仅适用于“动画”而不适用于“无动画”：

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

Answer 1

当您说“未解决”时，我假设模式在您关闭时会立即消失。

考虑打开或关闭模式时会发生什么（关于安装/卸载）。当您打开它时，Modal 组件及其内容存在于 DOM 中，因此您的动画没有理由不工作。但是，如果您的 Modal 在关闭时立即卸载，它就会从 DOM 中删除 - 所以没有任何动画。

要解决此问题，您必须将Modal 的“真正”关闭延迟一秒钟；这样，动画将有时间完成。

您没有说Modal 是您自己的自定义组件还是来自另一个库。但是像react-responsive-modal 这样的东西可以让你的生活更轻松，因为它可以为你处理动画并且开箱即用。