<p>Saya telah melaksanakan modal dalam reaksi dan css dan pada masa ini apabila saya membukanya, saya telah melaksanakan animasi slaid ke atas di mana modal meluncur ke atas dari bawah tetapi apabila saya menutupnya Saya Mahu ia meluncur ke bawah, saya tidak boleh memikirkan cara membuat animasi slaid ke bawah dengan tepat, bolehkah sesiapa membantu? Kod=></p> <pre class="brush:php;toolbar:false;">import "./styles.css"; import bertindak balas, { useState } daripada "react"; eksport fungsi lalai App() { const [isModalOpen, setIsModalOpen] = useState(false); kembali ( <div> <butang onClick={() => setIsModalOpen(true)}>buka </button> {isModalOpen && <div className={`modal-overlay`}> <div className={`modal-content`}> <div className="feedbackModalHeader"> <img src="/assets/dislike_modal.svg" alt="" className="tidak sukaBtnNonFilled" /> <p className="berikan Maklum Balas">Berikan maklum balas tambahan</p> </div> <butang onClick={() => setIsModalOpen(false)}> </div> </div> )} </div> ); }</pre> <p>css code=></p> <pre class="brush:php;toolbar:false;">.modal-overlay { kedudukan: tetap; atas: 0; kiri: 0; kanan: 0; bawah: 0; warna latar belakang: rgba(0, 0, 0, 0.5); paparan: flex; align-item: tengah; justify-content: pusat; z-indeks: 9999; peralihan: kelegapan 0.3s mudah; } * { lebar maksimum: 100%; } .modal-content { latar belakang: #f5f0f0; padding: 20px; jejari sempadan: 4px; bayang-kotak: 0 2px 10px rgba(0, 0, 0, 0.15); indeks z: 999; mengubah: translateY(100%); animasi: slaid-up 0.3s ease-out ke hadapan; lebar: 59rem; jejari sempadan: 8px; jidar-kiri: auto; margin-kanan: auto; bayang-kotak: 0 4px 20px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%); ketinggian: 21rem; kedudukan: relatif; kiri: 2rem; } @keyframes slaid-up { daripada { mengubah: translateY(100%); } kepada { transform: translateY(0); } } .butang tutup { jawatan: mutlak; atas: 10px; kanan: 10px; sempadan: tiada; latar belakang: telus; saiz fon: 24px; kursor: penunjuk; } .memberikan maklum balas { saiz fon: 20px; } .feedbackModalHeader { paparan: flex; align-item: tengah; jurang: 1.2rem; jidar atas: 0.8rem; }</pre> <p>Pautan Kotak Pasir Kod => https://codesandbox.io/s/dark-river-6ckllv?file=/src/styles.css</p>

.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;
  }
}

const [isOpen, setIsOpen] = useState(false);

<button onClick={() => setIsOpen(true)}>Open Modal</button>

<div className={`modal ${isOpen ? 'modal-slide-down' : ''}`}>
  {/* Modal content goes here */}
</div>