反应动画

Question

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

objective 是当我单击 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

当您说“未解析”时，我假设模态框在您关闭它时立即消失。

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

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

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

反应动画

React animations

javascript

css

animation

reactjs