我试图通过按下右下角的操作按钮来创建一个弹出模式。我希望模式向上滑动,模式后面的背景模糊。现在,模式只是在按钮被按下并再次关闭时出现。这很好,但我希望背景模糊,菜单平滑地向上滑动。如果可能的话,我想让按钮在modal打开时变成白色。下面是代码:
import React, { useState } from "react";
import ActionButton from "../../components/ActionButton";
import AddEventActionCard from "../../components/AddEventActionCard";
import AppHeader from "../../components/AppHeader";
import FooterNav from "../../components/FooterNav";
import "../Upcoming_Events/UpcomingEvents.css";
const UpcomingEvents = () => {
const [click, setClick] = useState(false);
const handleClick = () => setClick(!click);
return (
<div>
<AppHeader />
<div className="upcoming-container">
<div className="upcoming-card-container">
<div className="upcoming-card-top-header">Upcoming Events</div>
<div className="upcoming-card-top-events-scroll-container"></div>
</div>
{click ? <AddEventActionCard /> : ""}
<div onClick={handleClick}>
<ActionButton />
</div>
</div>
<FooterNav />
</div>
);
};
export default UpcomingEvents;
我需要帮助!非常感谢!
2条答案
按热度按时间xriantvc1#
为了实现模糊背景和平滑滑动模式的所需功能,您可以使用CSS和React动画。
因此,让我们对您的代码进行一些更改,以便将其存档。
UpcomingEvents组件
中央支助组
ActionButton组件
nbysray52#
模态组件
为了使模态组件平滑地过渡到视图中而不是突然出现,需要两个布尔值。第一个值是
open
prop,它确定组件是否被挂载并触发useEffect更新isVisible
状态值。然后使用此状态值添加或删除开放类。当点击背景时,调用
handleClose
函数,将isVisible
值设置为false,并在转换结束后触发onClose
函数。onClose
函数负责从外部重置open
prop 。CSS模块
CSS样式表包括四个类:
.modal
、.open
、.backdrop
和.content
。.content
类与当前的讨论无关,因为它只涉及模态的内容。.modal
类负责为父容器提供一个固定的位置,相对于视口具有完整的宽度和高度尺寸。此外,它还包括一个100%的translateY偏移量,该偏移量将元素放置在屏幕底部之外。.open
类用于将.modal
translateY属性重置为0,从而使元素返回视图。.backdrop
类的不透明度为0,但包括一个逐渐淡入的过渡。这主要是出于美学目的。backdrop-filter: blur(0.25rem);
样式属性用于实现所需的模糊效果。使用次数