Membina Komponen Penapisan dengan Animasi CSS & JQuery

Beberapa bulan yang lalu, saya menulis artikel mengenai Mixitup, plugin jQuery yang popular untuk penapisan dan penyortiran. Dalam artikel hari ini, saya akan menunjukkan kepada anda bagaimana untuk membina komponen mudah ditapis anda sendiri dengan jQuery dan animasi CSS.

Tanpa berlengah lagi, mari kita mulakan!

Takeaways Key

Tutorial menunjukkan cara membuat komponen yang boleh ditapis menggunakan animasi jQuery dan CSS, bermula dengan menubuhkan struktur HTML dengan butang penapis dan unsur -unsur yang akan ditapis, dikelompokkan ke dalam kategori.
Persediaan CSS melibatkan menetapkan kelas 'aktif' ke butang penapis yang sepadan dengan kategori penapis aktif, menggunakan Flexbox untuk membuat susun atur untuk elemen sasaran, dan menentukan dua animasi kerangka utama CSS untuk mendedahkan unsur -unsur.
persediaan jQuery melibatkan kod menulis untuk mengendalikan peristiwa klik pada butang penapis, mengeluarkan kelas 'aktif' dari semua butang dan memberikannya hanya kepada yang dipilih, mengambil dan menilai nilai atribut penapis data butang, dan menggunakan Animasi CSS untuk menunjukkan atau menyembunyikan elemen berdasarkan penapis yang dipilih.
Tutorial juga menunjukkan cara mengubah suai kod untuk menghidupkan unsur -unsur secara berurutan, menggunakan kaedah masing -masing () untuk meleleh melalui elemen sasaran dan kaedah kelewatan untuk menetapkan jumlah milisaat setiap elemen harus menunggu sebelum memudar.

menyediakan html

Sebagai langkah pertama, saya akan menunjukkan kepada anda struktur HTML komponen. Pertimbangkan markup berikut:

<span><span><span><div> class<span>="cta filter"</span>>
  <span><span><span><a> class<span>="all active"</span> data-filter<span>="all"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show All<span><span></span>></span>
</span>  <span><span><span><a> class<span>="green"</span> data-filter<span>="green"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Green Boxes<span><span></span>></span>
</span>  <span><span><span><a> class<span>="blue"</span> data-filter<span>="blue"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Blue Boxes<span><span></span>></span>
</span>  <span><span><span><a> class<span>="red"</span> data-filter<span>="red"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Red Boxes<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>
<span><span><span><div> class<span>="boxes"</span>>
  <span><span><span><a> class<span>="red"</span> data-category<span>="red"</span> href<span>="#"</span>></a></span>Box1<span><span></span>></span>
</span>  <span><span><span><a> class<span>="green"</span> data-category<span>="green"</span> href<span>="#"</span>></a></span>Box2<span><span></span>></span>
</span>  <span><span><span><a> class<span>="blue"</span> data-category<span>="blue"</span> href<span>="#"</span>></a></span>Box3<span><span></span>></span>
</span>
 <span><!-- other anchor/boxes here ... -->
</span>
<span><span><span></span></span></span></span></span></span>
</div></span>></span></span>

Perhatikan bahawa saya telah menubuhkan beberapa markup asas yang cukup. Berikut adalah penjelasannya:

Pertama, saya telah menentukan butang penapis dan unsur -unsur yang saya mahu menapis (kami akan memanggil mereka sasaran elemen).
Seterusnya, saya telah mengumpulkan elemen sasaran ke dalam tiga kategori (biru, hijau, dan merah) dan saya memberi mereka atribut kategori data. Nilai atribut ini menentukan kategori yang setiap elemen dimiliki.
Saya juga menugaskan atribut penapis data ke butang penapis. Nilai atribut ini menentukan kategori penapis yang dikehendaki. Contohnya, butang dengan atribut/nilai "merah" data hanya akan menunjukkan unsur-unsur yang dimiliki oleh kategori merah. Sebaliknya, butang dengan penapis data = "semua" akan menunjukkan semua elemen.

Sekarang bahawa anda mempunyai gambaran keseluruhan HTML yang diperlukan, kami boleh meneruskan untuk meneroka CSS.

Menyediakan CSS

Setiap kali kategori penapis aktif, butang penapis yang sepadan menerima kelas aktif. Secara lalai, butang dengan data penapis data = "semua" mendapat kelas ini.

Berikut adalah gaya yang berkaitan:

Di samping itu, saya akan menggunakan Flexbox untuk membuat susun atur untuk elemen sasaran.

<span><span>.filter a</span> {
</span>  <span>position: relative;
</span><span>}
</span>
<span><span>.filter a.active:before</span> {
</span>  <span>content: '';
</span>  <span>position: absolute;
</span>  <span>left: 0;
</span>  <span>top: 0;
</span>  <span>display: inline-block;
</span>  <span>width: 0;
</span>  <span>height: 0;
</span>  <span>border-style: solid;
</span>  <span>border-width: 15px 15px 0 0;
</span>  <span>border-color: #333 transparent transparent transparent;
</span><span>}</span>

Lihat gaya yang berkaitan di bawah:

<span><span><span><div> class<span>="cta filter"</span>>
  <span><span><span><a> class<span>="all active"</span> data-filter<span>="all"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show All<span><span></span>></span>
</span>  <span><span><span><a> class<span>="green"</span> data-filter<span>="green"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Green Boxes<span><span></span>></span>
</span>  <span><span><span><a> class<span>="blue"</span> data-filter<span>="blue"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Blue Boxes<span><span></span>></span>
</span>  <span><span><span><a> class<span>="red"</span> data-filter<span>="red"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Red Boxes<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>
<span><span><span><div> class<span>="boxes"</span>>
  <span><span><span><a> class<span>="red"</span> data-category<span>="red"</span> href<span>="#"</span>></a></span>Box1<span><span></span>></span>
</span>  <span><span><span><a> class<span>="green"</span> data-category<span>="green"</span> href<span>="#"</span>></a></span>Box2<span><span></span>></span>
</span>  <span><span><span><a> class<span>="blue"</span> data-category<span>="blue"</span> href<span>="#"</span>></a></span>Box3<span><span></span>></span>
</span>
 <span><!-- other anchor/boxes here ... -->
</span>
<span><span><span></span></span></span></span></span></span>
</div></span>></span></span>

Akhir sekali, saya menentukan dua animasi kerangka utama CSS yang akan saya gunakan kemudian untuk mendedahkan unsur -unsur:

<span><span>.filter a</span> {
</span>  <span>position: relative;
</span><span>}
</span>
<span><span>.filter a.active:before</span> {
</span>  <span>content: '';
</span>  <span>position: absolute;
</span>  <span>left: 0;
</span>  <span>top: 0;
</span>  <span>display: inline-block;
</span>  <span>width: 0;
</span>  <span>height: 0;
</span>  <span>border-style: solid;
</span>  <span>border-width: 15px 15px 0 0;
</span>  <span>border-color: #333 transparent transparent transparent;
</span><span>}</span>

Dengan markup dan CSS di tempat, kita boleh mula membina javascript/jQuery.

menyediakan jQuery

Lihat kod di bawah, selepas itu saya akan menerangkan apa yang berlaku:

<span><span>.boxes</span> {
</span>  <span>display: flex;
</span>  <span>flex-wrap: wrap;
</span><span>}
</span>
<span><span>.boxes a</span> {
</span>  <span>width: 23%;
</span>  <span>border: 2px solid #333;
</span>  <span>margin: 0 1% 20px 1%;
</span>  <span>line-height: 60px;
</span><span>}</span>

Setiap kali butang penapis diklik, yang berikut berlaku:

Kelas aktif dikeluarkan dari semua butang dan hanya diberikan kepada butang yang dipilih.
Nilai atribut penapis data butang diambil dan dinilai.
Jika nilai penapis data adalah semua, semua elemen harus muncul. Untuk berbuat demikian, saya mula-mula menyembunyikannya dan kemudian, apabila semua elemen tersembunyi, saya menunjukkan mereka menggunakan animasi CSS berputar-kanan atau zum.
Jika nilai tidak semua, unsur sasaran kategori yang sepadan harus muncul. Untuk berbuat demikian, saya mula-mula menyembunyikan semua elemen dan kemudian, apabila mereka semua tersembunyi, saya hanya menunjukkan unsur-unsur kategori yang berkaitan menggunakan animasi CSS yang berputar atau zum.
Pada ketika ini, penting untuk menjelaskan satu perkara. Perhatikan sintaks untuk kaedah fadeout () dalam kod di atas. Ia kelihatan seperti berikut:

Anda mungkin lebih akrab dengan sintaks ini walaupun:

<span><span>@keyframes zoom-in</span> {
</span>  <span>0% {
</span>   <span>transform: scale(.1);
</span>  <span>}
</span>  <span>100% {
</span>    <span>transform: none;
</span>  <span>}
</span><span>}
</span>
<span><span>@keyframes rotate-right</span> {
</span>  <span>0% {
</span>    <span>transform: translate(-100%) rotate(-100deg);
</span>  <span>}
</span>  <span>100% {
</span>    <span>transform: none;
</span>  <span>}
</span><span>}
</span>
<span><span>.is-animated</span> {
</span>  <span>animation: .6s zoom-in;
</span>  // <span>animation: .6s rotate-right; 
</span><span>}</span>

Pengisytiharan ini mempunyai makna yang berbeza:

<span>var $filters = $('.filter [data-filter]'),
</span>    $boxes <span>= $('.boxes [data-category]');
</span>
$filters<span>.on('click', function(e) {
</span>  e<span>.preventDefault();
</span>  <span>var $this = $(this);
</span>  $filters<span>.removeClass('active');
</span>  $<span>this.addClass('active');
</span>
  <span>var $filterColor = $this.attr('data-filter');
</span>
  <span>if ($filterColor == 'all') {
</span>    $boxes<span>.removeClass('is-animated')
</span>      <span>.fadeOut().promise().done(function() {
</span>        $boxes<span>.addClass('is-animated').fadeIn();
</span>      <span>});
</span>  <span>} else {
</span>    $boxes<span>.removeClass('is-animated')
</span>      <span>.fadeOut().promise().done(function() {
</span>        $boxes<span>.filter('[data-category = "' + $filterColor + '"]')
</span>          <span>.addClass('is-animated').fadeIn();
</span>      <span>});
</span>  <span>}
</span><span>});</span>

Dalam kes pertama, panggilan balik hanya dilaksanakan selepas semua elemen sasaran menjadi tersembunyi. Anda boleh mempelajari lebih lanjut mengenai pendekatan ini dengan melawat bahagian Janji () Dokumen JQuery.

• Dalam kes kedua, panggilan balik dipecat beberapa kali. Khususnya, ia dilaksanakan setiap kali elemen menjadi tersembunyi.
Demo di bawah menggunakan animasi zum:

Lihat pena komponen penyortiran/penapisan dengan CSS dan jQuery (dengan animasi zum) oleh SitePoint (@SitePoint) pada Codepen.

dan demo ini menggunakan animasi berputar-kanan:

Lihat pena komponen penyortiran/penapisan dengan CSS dan jQuery (dengan animasi berputar) oleh SitePoint (@SitePoint) pada codepen.

Sudah tentu, animasi CSS yang disebutkan di atas adalah pilihan. Sekiranya anda tidak menyukai animasi khusus ini, jangan ragu untuk membuangnya dan mendedahkan unsur -unsur menggunakan hanya kaedah JQuery's Fadein ().

Sekarang anda memahami bagaimana komponen berfungsi, saya akan menunjukkan kepada anda bagaimana untuk membuat variasi yang berbeza.

unsur -unsur animasi secara berurutan

Sehingga kini, anda mungkin menyedari bahawa semua elemen muncul pada masa yang sama. Saya sekarang akan mengubah suai kod untuk menunjukkan kepada mereka secara berurutan:

<span><span><span><div> class<span>="cta filter"</span>>
  <span><span><span><a> class<span>="all active"</span> data-filter<span>="all"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show All<span><span></span>></span>
</span>  <span><span><span><a> class<span>="green"</span> data-filter<span>="green"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Green Boxes<span><span></span>></span>
</span>  <span><span><span><a> class<span>="blue"</span> data-filter<span>="blue"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Blue Boxes<span><span></span>></span>
</span>  <span><span><span><a> class<span>="red"</span> data-filter<span>="red"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Red Boxes<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>
<span><span><span><div> class<span>="boxes"</span>>
  <span><span><span><a> class<span>="red"</span> data-category<span>="red"</span> href<span>="#"</span>></a></span>Box1<span><span></span>></span>
</span>  <span><span><span><a> class<span>="green"</span> data-category<span>="green"</span> href<span>="#"</span>></a></span>Box2<span><span></span>></span>
</span>  <span><span><span><a> class<span>="blue"</span> data-category<span>="blue"</span> href<span>="#"</span>></a></span>Box3<span><span></span>></span>
</span>
 <span><!-- other anchor/boxes here ... -->
</span>
<span><span><span></span></span></span></span></span></span>
</div></span>></span></span>

kod di atas kelihatan serupa dengan yang sebelumnya tetapi terdapat beberapa perbezaan yang berbeza:

• Pertama, saya menggunakan kaedah masing -masing () untuk melangkah melalui elemen sasaran. Plus, kerana ia gelung, saya mendapat indeks elemen semasa (yang berasaskan sifar) dan mengalikannya dengan nombor (mis. 200). Nombor yang diperoleh diluluskan sebagai hujah kepada kaedah kelewatan. Nombor ini menunjukkan jumlah milisaat yang setiap elemen harus menunggu sebelum memudar.
• Seterusnya, saya menggunakan kaedah penamat () untuk menghentikan animasi yang sedang dijalankan untuk unsur-unsur yang dipilih di bawah kes-kes tertentu. Untuk memahami penggunaannya, inilah senario: klik pada butang penapis dan kemudian, sebelum semua elemen muncul, klik pada butang sekali lagi. Anda akan melihat bahawa semua elemen hilang. Begitu juga, jalankan ujian ini sekali lagi selepas mengeluarkan dua contoh kaedah ini. Dalam kes sedemikian, anda akan melihat bahawa unsur -unsur menerima beberapa kesan yang tidak diingini. Kadang -kadang memanggil kaedah ini dengan betul boleh menjadi rumit. Untuk contoh ini, saya terpaksa bereksperimen sedikit sehingga saya dapati di mana saya harus meletakkannya.

Demo di bawah menghidupkan unsur-unsur yang ditapis secara berurutan menggunakan animasi zum:

Lihat komponen penapisan/penyortiran penapisan pena dengan CSS & JQuery oleh SitePoint (@SitePoint) pada codepen.

Demo di bawah menghidupkan unsur-unsur yang ditapis secara berurutan menggunakan animasi berputar-kanan:

Lihat penapisan/penyortiran penapis pena dengan CSS dan jQuery oleh SitePoint (@SitePoint) pada codepen.

Kesimpulan

Komponen yang sama ini boleh dibina tanpa jQuery dan mungkin mempunyai prestasi yang lebih baik, tetapi keupayaan untuk menggunakan kaedah JQuery's Fadein () dan Fadeout () membolehkan kod yang lebih mudah yang mengambil kesempatan daripada ciri -ciri tertentu yang tersedia untuk jQuery.

beritahu saya dalam komen jika anda mempunyai penyelesaian yang berbeza, atau cara untuk memperbaiki kod.

Soalan Lazim (Soalan Lazim) Mengenai Membina Komponen Penapisan dengan Animasi CSS & JQuery

Bagaimana saya boleh menambah lebih banyak penapis ke komponen?

Menambah lebih banyak penapis ke komponennya agak mudah. Anda perlu menentukan penapis baru dalam CSS anda dan kemudian tambahkan fungsi yang sepadan dalam kod jQuery anda. Sebagai contoh, jika anda ingin menambah penapis 'kelabu', anda akan mula-mula menentukannya dalam CSS anda seperti ini:

.filter-grayscale { filter: grayscale (100%);
}
Kemudian, dalam kod jQuery anda, anda akan menambahkan kes baru ke pernyataan suis anda untuk mengendalikan penapis baru:

suis (penapis) { // Kes-kes yang ada ...
kes 'grayscale':
$ container.addclass ('filter-grayscale');
break;
// ...
}

Ingat untuk menambah butang atau elemen UI lain yang membolehkan pengguna mengaktifkan penapis baru.

Bolehkah saya menggunakan komponen penapisan ini dengan perpustakaan JavaScript yang lain? JQuery direka untuk bersesuaian dengan perpustakaan lain. Anda hanya perlu memastikan bahawa tiada konflik antara perpustakaan yang berbeza. Sekiranya terdapat konflik, anda boleh menggunakan kaedah Noconflict () JQuery untuk mengelakkannya. Kaedah ini melepaskan pegangan pada `= pengenal pintasan, yang membolehkan perpustakaan lain menggunakannya. Anda kemudian boleh menggunakan nama penuh JQuery untuk memanggil kaedahnya.

Bagaimana saya boleh menghidupkan peralihan antara penapis? Anda perlu menambah harta peralihan ke elemen yang anda mahu menghidupkan. Harta ini menentukan harta CSS untuk peralihan, tempoh peralihan, fungsi masa, dan kelewatan sebelum peralihan bermula. Sebagai contoh, jika anda ingin menghidupkan peralihan harta penapis lebih dari 1 saat, anda akan menambah CSS berikut:

.container { peralihan: penapis 1S;

}

Kemudian, apabila anda menukar penapis menggunakan jQuery, peralihan akan animasi.

Bolehkah saya menggunakan komponen penapisan ini pada pelbagai elemen pada halaman yang sama?
Ya, anda boleh menggunakan komponen penapisan ini pada pelbagai elemen pada halaman yang sama. Anda hanya perlu memastikan bahawa setiap elemen mempunyai ID atau kelas unik yang boleh anda gunakan untuk memilihnya dengan jQuery. Kemudian, anda boleh menggunakan komponen penapisan untuk setiap elemen secara individu.
Bagaimana saya boleh membuat penapis responsif? viewport. Anda boleh menggunakan pertanyaan media CSS untuk menggunakan gaya yang berbeza untuk saiz viewport yang berbeza. Dalam kod jQuery anda, anda boleh menggunakan kaedah $ (tetingkap). Resize () untuk melaksanakan kod apabila tetingkap diubahsuai. Anda kemudian boleh menyesuaikan penapis berdasarkan saiz baru tetingkap.

Bolehkah saya menggunakan animasi CSS tanpa jQuery?

Ya, anda boleh menggunakan animasi CSS tanpa jQuery. Animasi CSS adalah ciri CSS dan tidak memerlukan sebarang JavaScript. Walau bagaimanapun, jQuery boleh memudahkan untuk mengurus dan mengawal animasi, terutamanya jika anda mempunyai animasi yang kompleks atau jika anda ingin menghidupkan unsur -unsur sebagai tindak balas kepada tindakan pengguna. 🎜> Menambah penapis tersuai melibatkan menentukan kelas CSS baru dengan kesan penapis yang dikehendaki dan kemudian menambahkan fungsi yang sepadan dalam kod jQuery anda. Prosesnya sama dengan menambahkan lebih banyak penapis, seperti yang diterangkan dalam jawapan kepada Soalan 1.

Bolehkah saya menggunakan komponen penapisan ini dengan kandungan dinamik?

Ya, anda boleh menggunakan komponen penapisan ini dengan kandungan dinamik. Anda hanya perlu memastikan bahawa komponen penapisan digunakan pada kandungan selepas ia dimuatkan. Anda boleh melakukan ini dengan memanggil komponen penapisan dalam fungsi panggil balik permintaan Ajax anda atau dalam $ (dokumen). Ready () Fungsi Jika anda memuatkan kandungan apabila halaman dimuatkan. Prestasi komponen penapisan?

Mengoptimumkan prestasi komponen penapisan boleh melibatkan beberapa strategi. Satu strategi adalah untuk meminimumkan bilangan manipulasi DOM. Setiap kali anda menambah atau mengeluarkan kelas dengan jQuery, ia menyebabkan penyemak imbas untuk mengira semula susun atur, yang boleh mahal. Untuk meminimumkan ini, anda boleh mengumpulkan perubahan anda bersama -sama dan menjadikannya sekaligus. Strategi lain ialah menggunakan peralihan CSS dan bukannya animasi jQuery, kerana peralihan CSS umumnya lebih baik. komponen dengan pangkalan data backend. Anda perlu membuat permintaan AJAX ke pelayan untuk mengambil data dari pangkalan data, dan kemudian menggunakan jQuery untuk memohon komponen penapisan ke data. Ini akan membolehkan anda menapis data berdasarkan kriteria yang disimpan dalam pangkalan data.

Atas ialah kandungan terperinci Membina Komponen Penapisan dengan Animasi CSS & JQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!