Cara Menghidupkan Elemen Butiran Menggunakan Waapi

Gunakan API Animasi Web untuk menjadi asli<details></details> Kesan Animasi Elemen

Salah satu keperluan animasi yang paling biasa di laman web adalah pengembangan gaya akordion dan kesan penutupan. Menariknya, fungsi slideDown() JQuery sudah wujud seawal versi pertama pada tahun 2006.

Artikel ini akan menerangkan cara menggunakan API Animasi Web sebagai Orang Asli<details></details> Unsur -unsur animasi.

Struktur HTML

Pertama, mari kita lihat struktur tag HTML yang diperlukan untuk melaksanakan animasi ini.

<details></details> Unsur memerlukan satu<summary></summary> elemen.<summary></summary> Ia adalah sesuatu yang kelihatan apabila akordion dilipat.<details></details> Semua elemen lain adalah sebahagian daripada kandungan di dalam akordion. Untuk memudahkan pelaksanaan kesan animasi, kami membungkusnya dalam satu

tengah.

<details>
  <summary>Tajuk Akordion</summary>
  <div class="content">
    <p>
      Lorem Ipsum Dolor Sit Amet, Consistetur Apisicing Elit. Modi Unde, Ex Rem Voluptates Autem Aliquid Veniam Quis Temporibus Repudiiandae Illo, Nostrum, Pariatur Quae! Di Animi Modi Dignissimos Corrupti Placeat Voluptatum!
    </p>
  </div>
</details>

Kelas akordion

Untuk meningkatkan kebolehgunaan semula kod, kita harus membuat kelas akordion. Dengan cara ini kita boleh menggunakan setiap<details></details> Hubungi new Accordion() pada elemen.

 akordion kelas {
  pembina (el) {}
  onclick (e) {}
  mengecut () {}
  buka () {}
  berkembang () {}
  onanimationFinish (buka) {}
}

constructor()

Pembina digunakan untuk menyimpan data yang diperlukan untuk setiap akordion.

 pembina (el) {
  this.el = el;
  this.summary = el.QuerySelector ('Ringkasan');
  this.content = el.QuerySelector ('. Content');
  this.animation = null;
  this.isclosing = false;
  this.isexpanding = false;
  this.summary.addeventListener ('klik', (e) => this.onclick (e));
}

onClick()

Dalam fungsi onClick() , kita periksa sama ada elemen menjadi bernyawa (tutup atau berkembang). Jika pengguna mengklik pada akordion sementara elemen sedang bernyawa, kita perlu melakukan cek ini. Sekiranya kelajuan klik terlalu cepat, kami tidak mahu akordion melompat dari sepenuhnya berkembang sepenuhnya.<details></details> Apabila elemen dibuka, penyemak imbas akan menambah harta open kepadanya. Kita boleh mendapatkan nilai harta ini melalui this.el.open .

 onclick (e) {
  E.PreventDefault ();
  this.el.style.Overflow = 'Hidden';
  jika (this.isclosing ||! this.el.open) {
    this.open ();
  } else if (this.isexpanding || this.el.open) {
    this.shrink ();
  }
}

shrink()

Fungsi shrink() ini menggunakan fungsi waapi .animate() . Anda boleh membaca dokumentasi MDN untuk maklumat lanjut. Waapi sangat mirip dengan CSS @keyframes . Kita perlu menentukan kerangka utama dan akhir animasi. Dalam contoh ini, kita hanya memerlukan dua kerangka utama, yang pertama adalah ketinggian semasa elemen dan yang kedua adalah ketinggian selepas akordion ditutup. Ketinggian semasa disimpan dalam pemboleh ubah startHeight . Ketinggian Tutup disimpan dalam pemboleh ubah endHeight , sama dengan<summary></summary> ketinggian.

 mengecut () {
  this.isclosing = true;
  const startheight = `$ {this.el.offsetheight} px`;
  const endheight = `$ {this.summary.offsetheight} px`;
  jika (this.animation) {
    this.animation.cancel ();
  }
  this.animation = this.el.animate ({
    Ketinggian: [Startheight, Endheight]
  }, {
    Tempoh: 400,
    Kemudahan: 'mudah keluar'
  });
  this.animation.onfinish = () => this.onanimationFinish (false);
  this.Animation.onCancel = () => this.isclosing = false;
}

open()

Fungsi open() dipanggil apabila kita mahu mengembangkan akordion. Fungsi ini pada masa ini tidak mengawal animasi akordion. Pertama, kita mengira<details></details> Ketinggian elemen dan memohon kepada elemen menggunakan gaya sebaris. Setelah selesai, kita boleh menetapkan harta open untuk menjadikan kandungan kelihatan, tetapi sejak kita menetapkan overflow: hidden dan tetap untuk elemen, kandungan masih tersembunyi. Kemudian, kami menunggu bingkai seterusnya untuk memanggil fungsi expand() dan membuat animasi untuk elemen tersebut.

 buka () {
  this.el.style.height = `$ {this.el.offsetheight} px`;
  this.el.open = true;
  window.RequestAnimationFrame (() => this.expand ());
}

expand()

Fungsi expand() adalah serupa dengan fungsi shrink() , tetapi ia tidak animasi dari ketinggian semasa ke ketinggian dekat, tetapi dari ketinggian elemen ke ketinggian akhir. Ketinggian akhir sama dengan<summary></summary> ketinggian ditambah ketinggian kandungan dalaman.

 berkembang () {
  this.isexpanding = true;
  const startheight = `$ {this.el.offsetheight} px`;
  const endheight = `$ {this.summary.offsetheight this.content.offsetheight} px`;
  jika (this.animation) {
    this.animation.cancel ();
  }
  this.animation = this.el.animate ({
    Ketinggian: [Startheight, Endheight]
  }, {
    Tempoh: 400,
    Kemudahan: 'mudah keluar'
  });
  this.animation.onfinish = () => this.onanimationFinish (true);
  this.Animation.onCancel = () => this.isexpanding = false;
}

onAnimationFinish()

Fungsi ini dipanggil apabila animasi runtuh atau diperluas. Seperti yang dapat anda lihat, terdapat parameter open , ditetapkan untuk true apabila akordion dihidupkan, membolehkan kami menetapkan atribut HTML open pada elemen, kerana ia tidak lagi dikendalikan oleh penyemak imbas.

 onanimationFinish (buka) {
  this.el.Open = buka;
  this.animation = null;
  this.isclosing = false;
  this.isexpanding = false;
  this.el.style.height = this.el.style.overflow = '';
}

Sediakan akordion

Kami melakukan kebanyakan kod!

Semua yang tersisa adalah untuk setiap html<details></details> Elemen menggunakan kelas akordion kami. Untuk melakukan ini, kami menggunakan<details></details> querySelectorAll pada tag dan buat contoh akordion baru untuk setiap elemen.

 document.QuerySelectorAll ('Butiran'). Foreach ((el) => {
  Akordion Baru (EL);
});

Notis

Untuk mengira ketinggian dekat dan ketinggian terbuka, kita perlu memastikan<summary></summary> Sentiasa mempunyai ketinggian yang sama seperti kandungan.

Contohnya, jangan cuba<summary></summary> Tambah padding apabila dihidupkan, kerana ini boleh menyebabkan lompatan semasa proses animasi. Begitu juga untuk kandungan dalaman - ia harus mempunyai ketinggian tetap, dan kita harus mengelakkan kandungan dengan perubahan ketinggian semasa pembukaan animasi.

Juga, jangan<summary></summary> Tambah margin antara kandungan, kerana ia tidak mengira kerangka kekunci ketinggian. Sebaliknya, gunakan padding secara langsung pada kandungan untuk menambah beberapa jarak.

Meringkaskan

Itu sahaja, kami mencipta animasi akordion yang indah menggunakan JavaScript tanpa perpustakaan yang diperlukan!

Sila ambil perhatian bahawa laluan imej /uploads/20250331/174338369667e9ec90190a3.jpg perlu digantikan dengan laluan imej sebenar. Saya tidak dapat mengakses atau memproses fail imej, jadi saya hanya boleh menyimpan format asal.

Atas ialah kandungan terperinci Cara Menghidupkan Elemen Butiran Menggunakan Waapi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!