Bagaimana saya membuat peralihan togol ke elemen

Elemen HTML <details> menyediakan cara mudah untuk mencipta bahagian kandungan yang boleh dikembangkan dan boleh dilipat. Mari kita terokai cara untuk mempertingkatkan fungsi ini dengan peralihan CSS yang lancar dan menangani had penggunaan CSS sahaja.

Perlaksanaan <details> asas kelihatan seperti ini:

<code class="language-html"><details>
  <summary>Click to expand</summary>
  <p>This is the content.</p>
</details></code>

Sementara ini berfungsi, menambah peralihan yang lancar menggunakan CSS sahaja terbukti mencabar. CSS berikut, sebagai contoh, tidak menghasilkan kesan yang diingini:

<code class="language-css">details#my-details {
  transition-duration: 300ms;
}</code>

Untuk mencapai peralihan togol yang lancar, JavaScript diperlukan.

Penyelesaian

Kuncinya ialah membungkus kandungan dalam elemen <details> dengan elemen lain (di sini, <div>). Ini membolehkan kami menyasarkan dan menghidupkan kandungan secara berasingan:

<code class="language-html"><details id="my-details">
  <summary>Click to expand</summary>
  <div>
    <p>This is the content.</p>
  </div>
</details></code>

Kod JavaScript berikut kemudiannya mengendalikan animasi:

<code class="language-javascript">const details = document.getElementById("my-details");
const summary = details.firstElementChild;
const content = summary.nextElementSibling;
let isAnimating = false;

summary.onclick = (ev) => {
  ev.preventDefault();
  if (isAnimating) return;

  const contentHeight = content.getBoundingClientRect().height;
  isAnimating = true;

  // Closing <details>
  if (details.open) {
    return content
      .animate(
        { height: [contentHeight + 'px', '0px'] },
        { duration: 300 }
      )
      .finished
      .then(() => details.open = isAnimating = false);
  }

  // Opening <details>
  details.open = true;
  content.animate(
    { height: ['0px', contentHeight + 'px'] },
    { duration: 300 }
  ).finished.then(() => isAnimating = false);
};</code>

Kod JavaScript ini menggunakan kaedah animate() untuk mengawal peralihan ketinggian pembungkus kandungan. Ambil perhatian bahawa dalam sesetengah kes, menambah overflow: hidden; pada CSS pembungkus kandungan mungkin diperlukan untuk hasil yang optimum.

Penjelasan

Kod JavaScript menghalang kelakuan lalai <summary>, mendapatkan ketinggian kandungan, dan kemudian menggunakan kaedah animate() untuk melaraskan ketinggian dengan lancar berdasarkan sama ada <details> membuka atau menutup. Pembolehubah isAnimating menghalang berbilang animasi daripada berjalan serentak.

Pembolehubah `isAnimating`

Bendera isAnimating memastikan hanya satu animasi berjalan pada satu masa, menghalang konflik dan tingkah laku yang tidak dijangka jika pengguna mengklik berulang kali semasa animasi sedang dijalankan.

Kesimpulan

Teknik ini menyediakan peralihan yang lancar dan terkawal untuk elemen <details>. Walaupun contoh ini menggunakan animasi ketinggian, kaedah animate() boleh disesuaikan untuk menganimasikan sifat CSS yang lain, menawarkan pendekatan serba boleh untuk mencipta interaksi pengguna yang menarik. Ingat bahawa menyelam lebih mendalam ke dalam kaedah animate() dan keupayaannya disyorkan untuk animasi yang lebih maju.

Atas ialah kandungan terperinci Bagaimana saya membuat peralihan togol ke elemen . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!