Cara menggunakan CSS3 untuk mencapai kesan klik untuk sembunyikan

Dalam reka bentuk web moden, pengalaman pengguna adalah bahagian yang sangat penting. Menyembunyikan beberapa elemen yang tidak perlu boleh meningkatkan pengalaman pengguna halaman web dengan berkesan dan menjadikan kandungan lebih ringkas dan intuitif. Artikel ini akan memperkenalkan anda kepada cara menggunakan CSS3 untuk mencapai kesan klik untuk sembunyikan, dengan itu mencipta pengalaman pengguna yang lebih baik.

1. Cara biasa untuk menyembunyikan elemen

Dalam reka bentuk web tradisional, kami sering menggunakan display:none untuk menyembunyikan elemen di mana anda mahu menogol keterlihatan elemen. Walau bagaimanapun, terdapat beberapa kelemahan dalam pendekatan ini:

1. Elemen tersembunyi akan hilang sepenuhnya daripada paparan skrin dan pengguna tidak akan dapat mendapatkan elemen itu lagi.
2. Elemen tersembunyi mungkin menyebabkan masalah dengan reka letak halaman web dan tidak boleh menyesuaikan secara automatik dengan saiz halaman.
3. Untuk beberapa elemen utama, seperti bar navigasi, tajuk, dll., menyembunyikannya sepenuhnya mungkin tidak memenuhi keperluan pengguna.

2. Cara menyembunyikan elemen dengan mengklik

Dalam CSS3, anda boleh menggunakan peralihan atribut baharu untuk merealisasikan kesan klik elemen tersembunyi, supaya elemen itu hilang secara beransur-ansur apabila ia diklik dan hilang apabila diperlukan. Di bawah ini kami akan memperkenalkan langkah pelaksanaan khusus:

1. Dalam fail HTML, tambahkan kelas untuk elemen yang perlu disembunyikan, seperti .hide.
2. Kemudian dalam fail CSS, tentukan gaya .hide dan tetapkan sifat kelegapan dan keterlihatannya. Tetapkan mereka kepada 1 dan boleh dilihat masing-masing supaya elemen itu akan kelihatan.

3. Seterusnya, kami menambah beberapa atribut lain pada gaya .hide, seperti peralihan, acara penunjuk, kelegapan, dll., untuk mencapai kesan klik untuk sembunyikan.

   • Atribut peralihan digunakan untuk menambah beberapa kesan animasi lancar apabila bersembunyi dan ditunjukkan. Seperti yang ditunjukkan dalam kod berikut:

   .hide {
       opacity: 1;
       visibility: visible;
       transition: all 0.5s ease;
   }

   Salin selepas log masuk

   Dengan cara ini, apabila kita kemudiannya menetapkan sifat kelegapan dalam gaya .hide, elemen itu akan hilang secara beransur-ansur dengan animasi yang lancar.

   • Atribut pointer-events digunakan untuk menentukan sama ada elemen boleh bertindak balas kepada peristiwa klik tetikus pengguna. Di sini, kami menetapkannya kepada tiada untuk memastikan bahawa menyembunyikan elemen tidak menjejaskan operasi pengguna lain, seperti yang ditunjukkan di bawah:

   .hide {
       opacity: 1;
       visibility: visible;
       transition: all 0.5s ease;
       pointer-events: none;
   }

   Salin selepas log masuk
   • Atribut kelegapan mentakrifkan ketelusan elemen. Apabila kita menetapkannya kepada 0, elemen itu akan hilang sepenuhnya. Seperti yang ditunjukkan di bawah:

   .hide {
       opacity: 0;
       visibility: hidden;
       transition: all 0.5s ease;
       pointer-events: none;
   }

   Salin selepas log masuk

4. Akhir sekali, kami menambah pendengar JavaScript untuk melaksanakan kesan sembunyi klik. Dengan menambahkan pendengar, kita boleh membuat elemen tersembunyi hilang secara perlahan apabila pengguna mengklik padanya.

   var clickToHide = document.querySelectorAll('.hide');
   
   Array.from(clickToHide).forEach(function(element) {
       element.addEventListener('click', function(){
           this.style.opacity = "0";
           this.style.visibility = "hidden";
       });
   });

   Salin selepas log masuk

   Dengan cara ini, kami telah berjaya mencapai kesan klik pada elemen tersembunyi.

3 Ringkasan

Dengan menggunakan peralihan atribut baharu CSS3 untuk mencapai kesan penyembunyian klik, kami boleh mencipta pengalaman pengguna yang lebih baik dan mengelak daripada menggunakan Beberapa masalah dengan paparan: tiada; Teknik ini boleh digunakan untuk menyembunyikan beberapa elemen tidak kritikal untuk menjadikan halaman kelihatan lebih bersih. Walau bagaimanapun, kami juga perlu ambil perhatian bahawa menggunakan kesan ini pada beberapa elemen penting boleh menyebabkan beberapa kekeliruan kepada pengguna dan memerlukan pilihan.

Atas ialah kandungan terperinci Cara menggunakan CSS3 untuk mencapai kesan klik untuk sembunyikan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!