Animasi CSS adalah mudah dan mudah digunakan, tetapi adegan kompleks sangat mencabar. Sebagai contoh, tukar warna latar belakang butang apabila tetikus melayang? Mudah. Tetapi animasi kedudukan dan saiz elemen dengan cara yang berprestasi tinggi dan mempengaruhi kedudukan unsur-unsur lain? Sukar! Artikel ini akan meneroka isu ini secara mendalam.
Contoh yang sama adalah untuk mengeluarkan item dari sekumpulan item . Item yang disusun di atas perlu dipindahkan ke bawah untuk membuat jurang dalam item yang dikeluarkan dari bahagian bawah timbunan. Inilah cara ia berfungsi dalam kehidupan sebenar, dan pengguna mungkin mengharapkan pergerakan realistik ini di laman web. Jika tidak, pengguna mungkin berasa keliru atau hilang sementara. Berdasarkan pengalaman hidup, anda mengharapkan sesuatu untuk bekerja dengan cara tertentu dan mendapatkan hasil yang sama sekali berbeza, dan pengguna mungkin memerlukan masa tambahan untuk menangani pergerakan yang tidak realistik ini.
Berikut adalah UI untuk menambah item (mengklik butang) atau mengeluarkan item (mengklik projek).
Anda boleh sedikit menutup UI yang buruk dengan menambah animasi "memudar", dan lain -lain, tetapi hasilnya tidak akan menjadi hebat kerana senarai itu tiba -tiba akan runtuh dan menyebabkan masalah kognitif yang sama.
Memohon animasi CSS sahaja untuk peristiwa DOM yang dinamik (menambah unsur-unsur baru dan mengeluarkan unsur-unsur sepenuhnya) sangat rumit . Kami akan menghadapi masalah ini secara langsung dan memperkenalkan tiga jenis animasi yang berbeza untuk menangani masalah ini, yang semuanya mencapai matlamat untuk membantu pengguna memahami perubahan dalam senarai projek. Selepas menyelesaikan artikel ini, anda akan dapat menggunakan animasi ini, atau membina animasi anda sendiri berdasarkan konsep -konsep ini.
Kami juga akan meliputi kebolehcapaian secara ringkas dan bagaimana membuat susun atur HTML granular masih mengekalkan keserasian dengan peranti tambahan dengan sifat ARIA.
Pendekatan yang sangat moden (dan kegemaran peribadi saya) adalah untuk memudar masuk dan keluar secara menegak bergantung pada tempat mereka akhirnya akan tiba. Ini juga bermakna bahawa senarai perlu "dibuka" kedudukan (juga animasi) untuk memberi ruang untuknya. Jika elemen meninggalkan senarai, ruang yang ditempati perlu mengecut.
Oleh kerana kita melakukan banyak operasi yang berbeza pada masa yang sama, kita perlu mengubah struktur DOM untuk membungkus setiap .list-item .list-container Ini sangat penting untuk membuat kerja animasi kami.
Sekarang, gaya ini tidak disengajakan, kerana agar kesan animasi kami berfungsi kemudian, kita perlu gaya senarai dengan cara yang sangat spesifik, yang dilakukan dengan mengorbankan beberapa amalan CSS idiomatik.
.list {
Senarai gaya: Tiada;
}
.list-container {
kursor: penunjuk;
saiz font: 3.5rem;
ketinggian: 0;
Senarai gaya: Tiada;
Kedudukan: Relatif;
Teks-Align: Pusat;
lebar: 300px;
}
.List-container: not (: anak pertama) {
margin-top: 10px;
}
.list-container .list-item {
latar belakang warna: #D3D3D3;
Kiri: 0;
Padding: 2rem 0;
Kedudukan: Mutlak;
Atas: 0;
Peralihan: Semua 0.6s mudah keluar;
Lebar: 100%;
}
.add-btn {
latar belakang warna: telus;
Sempadan: 1px pepejal hitam;
kursor: penunjuk;
saiz font: 2.5rem;
margin-top: 10px;
Padding: 2rem 0;
Teks-Align: Pusat;
lebar: 300px;
} Pertama, kami menggunakan margin-top untuk mewujudkan ruang menegak antara unsur-unsur dalam timbunan. Tiada margin di bahagian bawah supaya item senarai lain dapat mengisi jurang yang dibuat oleh item senarai yang dikeluarkan. Dengan cara ini, walaupun kita menetapkan ketinggian kontena ke sifar, ia masih mempunyai margin di bahagian bawah. Ruang tambahan dibuat di antara item senarai terus di bawah item senarai yang dipadam. Dan item senarai yang sama harus dipindahkan ke atas sebagai tindak balas kepada ketinggian kontena item yang dipadam adalah sifar. Dan kerana ruang tambahan ini terus memperluaskan jurang menegak antara item senarai, kami menggunakan margin-top untuk mengelakkannya daripada berlaku.
Tetapi kami hanya melakukan ini jika bekas projek yang dimaksudkan bukan item pertama dalam senarai. Inilah sebabnya kami menggunakan :not(:first-child) - ia menempatkan segala -galanya kecuali bekas pertama (membolehkan pemilih). Kami melakukan ini kerana kami tidak mahu item senarai pertama ditolak dari pinggir atas senarai. Kami hanya mahu ini berlaku pada semua item selepas itu, kerana mereka berada di bawah item senarai lain, dan item senarai pertama tidak.
Sekarang, ini tidak mungkin masuk akal, kerana kita tidak menetapkan ketinggian mana -mana elemen kepada sifar. Tetapi kita akan melakukan ini kemudian, untuk mendapatkan jarak menegak antara elemen senarai yang betul, kita perlu menetapkan margin seperti yang kita lakukan.
absolute lagi perkara yang patut ditunjukkan ialah hakikat bahawa .list-container .list-item .list-container Kami melakukan ini untuk membuat elemen .list-item terapung ke atas apabila dikeluarkan, sambil bergerak lain-lain .list-item unsur-unsur dan mengisi jurang yang ditinggalkan dengan mengeluarkan elemen .list-item ini. Apabila ini berlaku, elemen .list-container (tidak benar-benar diposisikan, jadi dipengaruhi oleh DOM) runtuh ketinggiannya, yang membolehkan unsur .list-container .list-item lain.
Malangnya, kami tidak cukup untuk mendapatkan senarai yang sesuai di mana item senarai individu disusun satu persatu. Sebaliknya, semua yang dapat kita lihat pada masa ini adalah .list-item , yang mewakili semua item senarai yang disusun dalam kedudukan yang sama. Ini kerana, walaupun .list-item mungkin mempunyai ketinggian tertentu melalui atribut padding , elemen induk mereka tidak, tetapi ketinggian sifar. Ini bermakna tidak ada apa-apa di DOM yang sebenarnya memisahkan unsur-unsur ini antara satu sama lain, kerana untuk melakukan ini kita memerlukan unsur-unsur .list-container untuk mempunyai ketinggian tertentu kerana tidak seperti unsur-unsur anak mereka, mereka dipengaruhi oleh DOM.
Agar bekas senarai kami sesuai dengan ketinggian elemen anak mereka, kami perlu menggunakan JavaScript. Oleh itu, kami menyimpan semua item senarai dalam satu pembolehubah. Kemudian, kami membuat fungsi yang dipanggil segera selepas skrip dimuatkan.
Ini menjadi fungsi yang mengendalikan ketinggian elemen kontena senarai:
const listItems = document.QuerySelectorAll ('. list-item');
Fungsi mengiraHeightOfListContainer () {
};
CALLULEHEIGHTOFLISTCONTAINER (); Perkara pertama yang kita lakukan ialah mengekstrak elemen .list-item pertama dari senarai. Kita boleh melakukan ini kerana mereka semua saiz yang sama, jadi tidak kira elemen yang kita gunakan. Sebaik sahaja kami mengaksesnya, kami menyimpan ketinggiannya dalam piksel melalui harta clientHeight elemen. Selepas itu, kami membuat yang baru