javascript - 反应动画
问题描述
我有 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;
}
}
解决方案
当您说“未解决”时,我假设模式在您关闭时会立即消失。
考虑打开或关闭模态时会发生什么(关于安装/卸载)。当您打开它时,Modal 组件及其内容存在于 DOM 中,因此您的动画没有理由不工作。但是,如果您Modal
在关闭时立即卸载,它就会从 DOM 中删除 - 所以没有任何动画。
要解决问题,您必须将“真正”关闭延迟Modal
一秒钟;这样,动画将有时间完成。
您没有说Modal
是您自己的自定义组件还是来自另一个库。但是像react-responsive-modal这样的东西可以让你的生活更轻松,因为它可以为你处理动画并且开箱即用。
推荐阅读
- unity3d - 时间:2019-05-10 标签:c#how to play shoting audio And make it can hear publick not only local
- python - Python将ndarray对象转换为二维数组
- powershell - 在 VS Code 中向集成终端传递指令时双引号消失
- php - 如何为laravel中的所有页面带来相同的布局
- mysql - 如何比较两个表获得真假计数
- autocad - 从没有 .dwg 的旧 .plt 文件中检索信息?
- python - 分类交叉熵和二元交叉熵的区别
- r - 使用 R 下载历史天气数据时出错
- intellij-idea - elvis op 在新行上使用的 IntelliJ“意外符号”错误
- azure - 获取 keyvault 的访问令牌