Animasi gelongsor mod reaktif

Question

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=>

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

css code=>

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

Pautan Kotak Pasir Kod => https://codesandbox.io/s/dark-river-6ckllv?file=/src/styles.css

Answer 1

Anda perlu menukar kelas mod berdasarkan status. (Nama kelas bersyarat)

Berikut ialah cara mudah untuk mencipta corak dengan kandungan yang anda inginkan:

Pertama, tentukan animasi 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;
  }
}

Kemudian, dalam komponen React anda, tambahkan pembolehubah keadaan untuk menjejaki sama ada modal harus dihidupkan atau dimatikan:

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

Apabila pengguna mengklik butang atau melakukan tindakan lain untuk membuka modal, tetapkan keadaan isOpen kepada benar:

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

Akhir sekali, gunakan kelas CSS secara bersyarat pada mod berdasarkan keadaan isOpen:

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

Penjelasan lanjut:

Apabila kelas isOpen状态为true时，模态组件中会添加modal-slide-down类，从而触发向下滑动动画。当 isOpen 状态为 false 时，modal-slide-down akan dialih keluar, animasi slaid ke atas akan dicetuskan.

Dengan perubahan ini, modal akan meluncur ke bawah apabila dibuka dan meluncur semula apabila ditutup. Sudah tentu, anda mungkin perlu melaraskan tempoh animasi dan sifat CSS lain agar sesuai dengan kes penggunaan khusus anda.

Semoga saya dapat menyelesaikan masalah anda.