我已经在react和css中实现了一个模态，目前，当我打开它时，我已经实现了一个向上滑动的动画，其中模态从底部向上滑动，但是当我关闭它时我希望它向下滑动，我无法弄清楚如何准确创建向下滑动的动画，有人可以帮忙吗？ 代码=>
import "./styles.css"; import react, { useState } from "react"; export default function App() { const [isModalOpen, setIsModalOpen] = useState(false); return ( {isModalOpen && ( 
Provide additional feedback
)} ); } css 代码=>
.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; } 代码沙箱链接 => https://codesandbox.io/s/dark-river-6ckllv?file=/src/styles.css
您必须根据状态更改模式的类。 （条件类名）
这是一种使用您想要的内容创建模式的简单方法：
首先，定义 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：
最后，根据 isOpen 状态有条件地将 CSS 类应用到模式：
更多解释：
当
isOpen状态为true时，模态组件中会添加modal-slide-down类，从而触发向下滑动动画。当isOpen状态为 false 时，modal-slide-down类将被移除，从而触发上滑动画。通过这些更改，模式将在打开时向下滑动到视图中，并在关闭时向上滑动回来。当然，您可能需要调整动画持续时间和其他 CSS 属性以适合您的特定用例。
希望我能够解决您的问题。