<p>我已经在react和css中实现了一个模态，目前，当我打开它时，我已经实现了一个向上滑动的动画，其中模态从底部向上滑动，但是当我关闭它时我希望它向下滑动，我无法弄清楚如何准确创建向下滑动的动画，有人可以帮忙吗？
代码=></p>
<pre class="brush:php;toolbar:false;">import "./styles.css";
import react, { useState } from "react";
export default function App() {
const [isModalOpen, setIsModalOpen] = useState(false);
return (
<div>
<button onClick={() => setIsModalOpen(true)}>open </button>
{isModalOpen && (
<div className={`modal-overlay`}>
<div className={`modal-content`}>
<div className="feedbackModalHeader">
<img
src="/assets/dislike_modal.svg"
alt=""
className="dislikeBtnNonFilled"
/>
<p className="provideFeedback">Provide additional feedback</p>
</div>
<button onClick={() => setIsModalOpen(false)}> close </button>
</div>
</div>
)}
</div>
);
}</pre>
<p>css 代码=></p>
<pre class="brush:php;toolbar:false;">.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.3s ease;
}
* {
max-width: 100%;
}
.modal-content {
background: #f5f0f0;
padding: 20px;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
z-index: 999;
transform: translateY(100%);
animation: slide-up 0.3s ease-out forwards;
width: 59rem;
border-radius: 8px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 4px 20px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
height: 21rem;
position: relative;
left: 2rem;
}
@keyframes slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.close-button {
position: absolute;
top: 10px;
right: 10px;
border: none;
background: transparent;
font-size: 24px;
cursor: pointer;
}
.provideFeedback {
font-size: 20px;
}
.feedbackModalHeader {
display: flex;
align-items: center;
gap: 1.2rem;
margin-top: 0.8rem;
}</pre>
<p>代码沙箱链接 =>
https://codesandbox.io/s/dark-river-6ckllv?file=/src/styles.css</p>
1
881
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
您必须根据状态更改模式的类。 （条件类名）
这是一种使用您想要的内容创建模式的简单方法：
首先，定义 CSS 动画：
.modal-slide-down { animation-name: slide-down; animation-duration: 0.5s; animation-fill-mode: forwards; } @keyframes slide-down { 0% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }然后，在您的 React 组件中，添加一个状态变量来跟踪模式是否应该打开或关闭：
当用户单击按钮或执行其他操作来打开模式时，将 isOpen 状态设置为 true：
<button onClick={() => setIsOpen(true)}>Open Modal</button>最后，根据 isOpen 状态有条件地将 CSS 类应用到模式：
<div className={`modal ${isOpen ? 'modal-slide-down' : ''}`}> {/* Modal content goes here */} </div>更多解释：
当
isOpen状态为true时，模态组件中会添加modal-slide-down类，从而触发向下滑动动画。当isOpen状态为 false 时，modal-slide-down类将被移除，从而触发上滑动画。通过这些更改，模式将在打开时向下滑动到视图中，并在关闭时向上滑动回来。当然，您可能需要调整动画持续时间和其他 CSS 属性以适合您的特定用例。
希望我能够解决您的问题。