Memudahkan animasi CSS dengan ciri paparan dan saiz

Ditulis oleh Saleh Mubashar✏️

Sehingga baru-baru ini, hanya sebilangan terhad sifat CSS boleh dianimasikan. Sebagai contoh, untuk mencipta kesan fade-in atau fade-out, anda biasanya akan menggunakan sifat kelegapan dan bukannya sifat paparan, kerana yang terakhir tidak boleh dianimasikan. Isunya, bagaimanapun, ialah walaupun elemen menjadi tersembunyi secara visual, ia masih terdapat pada halaman.

Baru-baru ini, Chrome memperkenalkan ciri baharu yang menyelesaikan isu ini dan menjadikan proses pembangunan lebih mudah. Dalam artikel ini, kami akan membandingkan kaedah tradisional untuk menganimasikan sifat paparan dan saiz dengan ciri baharu ini.

Masalah dengan paparan animasi dan saiz elemen

Kemungkinan, anda terpaksa mencipta kesan fade-in/out pada beberapa elemen menggunakan CSS pada satu ketika. Kaedah pergi ke adalah untuk menggunakan animasi atau peralihan kepada kelegapan elemen. Tetapi menetapkan kelegapan kepada sifar sebenarnya tidak mengalih keluar elemen - ia hanya menjadikannya tidak kelihatan. Selalunya, itu sudah cukup baik.

Tetapi katakan anda mempunyai senarai tugasan yang membolehkan pengguna memadamkan item. Jika anda ingin mencipta animasi keluar supaya item itu pudar, anda biasanya menggunakan kelegapan. Tetapi jika senarai itu perlu melaraskan ketinggiannya, anda juga perlu menetapkan paparan kepada tiada. Isu di sini ialah walaupun item itu hilang secara visual, ia masih menggunakan ruang dalam DOM dan kucar-kacir dengan perkara seperti reka letak dan interaksi pengguna.

Berikut ialah perbandingan sebelah menyebelah dua pendekatan: satu menggunakan hanya kelegapan dan satu lagi menggabungkan kelegapan dengan paparan. Anda boleh cuba contoh di bawah untuk melihat perbezaannya:

Lihat Perbandingan Apl Todo Mudah Pen oleh Saleh-Mubashar (@saleh-mubashar) di CodePen.

Perhatikan bagaimana reka letak berubah apabila menggabungkan paparan dengan kelegapan, semasa menggunakan kelegapan sahaja meninggalkan jurang dalam senarai. Walaupun kaedah kedua (paparan kelegapan) menyelesaikan isu reka letak, ia mengganggu kesan pudar yang lancar kerana paparan: tiada satu pun digunakan sebelum pudar selesai. Ini menyebabkan kehilangan secara tiba-tiba dan bukannya pudar secara beransur-ansur.

Sebagai contoh, sifat kelegapan boleh beralih dengan lancar daripada 0 kepada 1. Walau bagaimanapun, sifat paparan tidak boleh dianimasikan kerana ia tidak mempunyai julat berangka — keadaannya adalah binari, seperti tiada, blok atau nilai lain. Kerana tiada nilai di antara, CSS tidak boleh menghidupkan paparan.

Begitu juga, pembangun sering menghadapi cabaran apabila cuba menghidupkan saiz intrinsik elemen, seperti ketinggian: auto. Ini biasanya digunakan untuk peralihan pada bahagian yang boleh dilipat seperti akordion, dengan ketinggian bermula pada 0px apabila ditutup dan mengembang agar sesuai dengan kandungan apabila dibuka. Walaupun sifat saiz seperti ketinggian lazimnya boleh dianimasikan (kerana ia mempunyai nilai mula dan tamat berangka), menganimasikan ke atau dari automatik menghasilkan isu. Penyemak imbas tidak boleh mengira langkah antara 0px dan auto; dengan itu penyelesaian yang kompleks mesti digunakan.

Penyelesaian tradisional untuk menghidupkan paparan dan saiz

Terdapat beberapa cara untuk menangani cabaran menganimasikan paparan dan saiz elemen. Dalam bahagian ini, kami akan membincangkan penyelesaian paling popular menggunakan kedua-dua CSS dan JavaScript.

Penyelesaian berasaskan CSS

Terdapat beberapa cara untuk menyelesaikan isu sifat paparan tidak boleh dianimasikan menggunakan CSS. Yang paling boleh dipercayai ialah menggunakan kelegapan bersama-sama dengan sifat saiz seperti ketinggian atau lebar. Dalam kes ini, sifat saiz digunakan untuk mengalih keluar elemen secara berkesan daripada DOM. Ini boleh dilakukan menggunakan sifat peralihan-tunda. Pada asasnya, kami menambah kelewatan pada peralihan saiz, yang sama dengan masa yang ditetapkan untuk peralihan kelegapan. Sebaik sahaja elemen pudar, saiznya ditetapkan dengan serta-merta kepada sifar, dengan berkesan mengalih keluarnya daripada reka letak seolah-olah paparan: tiada satu pun telah digunakan.

Menggunakan senarai tugasan sebagai contoh sekali lagi, pelaksanaannya akan kelihatan seperti ini:

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

Di sini, silapnya ialah menetapkan ketinggian dan padding kepada 0 selepas kelewatan sebaik sahaja kelegapan pudar kepada 0. Kelewatan dan panjang kelegapan perlu sama — dalam kes ini, 400ms. Ketinggian: 0 memastikan bahawa item senarai tidak berinteraksi dengan reka letak. Seperti yang dibincangkan sebelum ini, ketinggian: auto melaraskan secara dinamik berdasarkan kandungan; oleh itu, ia tidak boleh dianimasikan. Oleh itu, anda perlu memastikan bahawa elemen mempunyai ketinggian tetap tertentu untuk animasi berfungsi dengan betul.

Menetapkan keterlihatan kepada tersembunyi ialah satu lagi kaedah yang biasa digunakan. Walau bagaimanapun, ini tidak mengalih keluar elemen daripada DOM, dan ia masih menjejaskan reka letak seperti biasa, iaitu, ia mempengaruhi kedudukan elemen sekeliling.

Penyelesaian CSS yang paling biasa untuk menganimasikan elemen kepada atau dari saiz intrinsiknya (atau ketinggian: auto) ialah menggunakan ketinggian maksimum dan bukannya ketinggian. Ia bukan pelaksanaan yang paling bersih, tetapi ia menyelesaikan tugas. Anda pada asasnya menetapkan ketinggian maksimum kepada nilai yang lebih besar daripada yang akan diperolehi oleh elemen. Dengan cara ini, ia meniru peralihan yang lancar, sama seperti menganimasikan ketinggian tetap:

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
} 

Kelemahan yang paling jelas untuk pendekatan ini ialah anda perlu memastikan ketinggian maksimum sentiasa lebih besar daripada kandungan sebenar di dalam elemen. Isu lain ialah pemasaan peralihan boleh berasa tidak tepat melainkan ketinggian kandungan sepadan dengan sempurna dengan nilai ketinggian maksimum.

Katakan bahawa kandungan anda tinggi 400px tetapi anda menetapkan ketinggian maksimum kepada 1000px. Animasi secara teknikal akan diteruskan untuk keseluruhan tempoh (katakan dua saat). Tetapi secara visual, elemen akan berhenti berkembang sebaik sahaja ia mencapai ketinggian sebenar kandungan (400px), manakala ketinggian maks terus beralih kepada 1000px. Jadi, dalam kes ini, tempoh peralihan akan menjadi lebih pendek daripada yang anda tentukan.

kaedah JavaScript

Semua penyelesaian CSS yang dibincangkan di atas agak rumit dan boleh membawa kepada hasil yang tidak dapat diramalkan. Sehingga baru-baru ini, cara yang paling boleh dipercayai untuk mencapai ini adalah melalui JavaScript.

Untuk tidak menggunakan paparan selepas peralihan kelegapan, kami boleh menggunakan fungsi setInterval atau setTimeout untuk menambah kelewatan yang sepadan dengan tempoh peralihan kelegapan. Selepas kelewatan ini, anda boleh menetapkan paparan kepada tiada. Berikut ialah contoh:

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

Dalam kod ini, selepas butang diklik, elemen itu akan pudar selama satu saat, dan kemudian paparannya ditetapkan kepada tiada serta-merta — pada dasarnya mengalih keluarnya daripada reka letak.

Begitu juga, untuk menghidupkan saiz intrinsik, kita boleh mengira ketinggian elemen dalam JavaScript dan menggunakan nilai itu sebagai titik akhir untuk ketinggian. Pendekatan ini lebih dipercayai dan tepat. Walau bagaimanapun, perlu diingat bahawa kami masih menghidupkan sifat ketinggian.

Faedah yang jelas di sini ialah anda menetapkan ketinggian secara dinamik berdasarkan kandungan sebenar elemen, memastikan peralihan sepadan dengan ketinggian sebenar dan bukannya meneka dengan ketinggian maksimum.

Begini cara anda boleh melakukannya:

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
} 

Dalam contoh ini, kami mengembangkan bahagian yang bermula dengan ketinggian 0. Kami menggunakan scrollHeight untuk mengambil ketinggian penuh kandungan dan menggunakannya sebagai titik akhir untuk peralihan. Selepas peralihan selesai, kami menukar ketinggian kepada auto, yang membolehkan penyemak imbas melaraskan ketinggian bekas secara automatik berdasarkan kandungannya. Langkah ini adalah pilihan, tetapi ia berguna jika anda menjangkakan kandungan di dalam bekas berubah dari semasa ke semasa.

Ciri CSS baharu untuk menganimasikan paparan dan sifat saiz intrinsik

Sekarang mari kita lihat ciri CSS baharu yang baru tiba atau sedang dalam perjalanan ke penyemak imbas. Alat baharu ini menghapuskan keperluan untuk JavaScript dalam senario yang kami bincangkan sebelum ini dan membantu anda menulis CSS yang lebih bersih dan lebih pendek.

Paparan dan bingkai utama

Peraturan @keyframes at-rule membolehkan anda membuat animasi dengan mengawal langkah perantaraan dalam urutan animasi. Kemas kini terkini membolehkan anda menghidupkan paparan dan sifat [content-visibility](https://blog.logrocket.com/using-css-content-visibility-boost-rendering-performance/) dalam garis masa rangka utama.

Kami tidak betul-betul menginterpolasi antara paparan tiada dan blok (kerana itu tidak mungkin). Sebaliknya, kami menunggu semua kesan lain selesai dan kemudian menukar keadaan paparan. Ini serupa dengan apa yang kami lakukan dengan JavaScript — menunggu peralihan selesai sebelum menggunakan paparan: tiada — tetapi kini lebih mudah dengan CSS.

Blog Pembangun Chrome mempunyai demo yang sangat hebat yang menjelaskan perkara-perkara:

Lihat kad Pen Fade out - Animasi oleh web.dev (@web-dot-dev) pada CodePen.

Pertama, kelegapan ditetapkan kepada 0 melebihi 250ms. Setelah urutan ini selesai, paparan segera ditetapkan kepada tiada:

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

Kemenangan terbesar di sini ialah animasi yang lebih kompleks yang melibatkan sifat paparan, yang sehingga baru-baru ini sangat sukar untuk dilaksanakan menggunakan CSS (atau JavaScript), kini boleh dibuat dengan agak mudah.

Cara tingkah laku peralihan memudahkan peralihan paparan

Kesan fade-out juga kini boleh dibuat dengan peralihan menggunakan sifat [transition-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior) baharu . Ini membolehkan anda menggunakan peralihan pada sifat yang mempunyai tingkah laku animasi diskret, seperti paparan. Dengan menggunakan allow-discrete, anda boleh menghidupkan sifat paparan. Berikut ialah contoh ringkas:

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
} 

Animasi kemasukan dengan @gaya permulaan

Kami telah membincangkan kesan fade-out dengan agak meluas dalam artikel ini. Tetapi bagaimana dengan kes sebaliknya? Animasi kemasukan adalah rumit dan selalunya hanya boleh dilakukan melalui JavaScript. Peraturan gaya @permulaan baharu menjadikan perkara lebih mudah.

Seperti namanya, kami boleh menggunakannya untuk menggunakan gaya pada elemen yang boleh dicari oleh penyemak imbas sebelum elemen itu kelihatan pada halaman. Kita boleh menetapkan keadaan awal animasi kemasukan di sini. Sebaik sahaja elemen dipaparkan, ia beralih kembali kepada keadaan lalainya.

Berikut ialah contoh asas:

document.getElementById("fadeButton").addEventListener("click", function () {
  const element = document.getElementById("myElement");
  element.style.opacity = "0";
  setTimeout(() => {
    element.style.display = "none";
  }, 1000); // Match this value with the duration in CSS
});

Kad akan pudar masuk sebaik sahaja DOM dimuatkan. Anda boleh menggunakan @starting-style untuk semua jenis animasi masukan. Berikut ialah satu lagi contoh hebat daripada pasukan Pembangun Chrome:

_Lihat peralihan Item Pen oleh web.dev (@web-dot-dev) pada CodePen.
_

Menganimasikan saiz intrinsik dengan fungsi calc-size() 

Fungsi saiz calc, serupa dengan calc(), baru-baru ini diperkenalkan dalam Chrome 129. Secara ringkasnya, ia membolehkan matematik dilakukan pada saiz intrinsik dengan selamat dan boleh dipercayai. Ia kini menyokong operasi empat kata kunci: auto, kandungan min, kandungan maks dan kandungan sesuai.

Ini amat berguna untuk menganimasikan elemen ke dan dari saiz intrinsiknya. saiz calc membolehkan untuk menghidupkan mana-mana ketinggian yang pada masa ini boleh ditentukan dalam CSS kepada sifar atau kepada/dari nilai tetap yang kecil. Berikut ialah contoh mudah untuk mengembangkan bahagian boleh lipat dari ketinggian: 0 kepada auto:

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

Keserasian penyemak imbas

Kebanyakan ciri ini adalah terutamanya untuk mempertingkatkan animasi dan bukan komponen DOM yang penting, tetapi kerana ia agak baharu, ia masih berbaloi untuk menyemak keserasian penyemak imbas:

• Sifat paparan ialah @keyframe boleh dianimasikan dalam Chrome 116 dan Opera 102 . Sokongan Firefox masih dalam pembangunan dan Safari sedang mengusahakannya
• Sifat [transition-behavior](https://caniuse.com/mdn-css_properties_transition-behavior) dikeluarkan pertama kali dalam Chrome 117. Ia serasi dengan semua penyemak imbas utama kecuali Firefox, di mana ia sedang dalam pembangunan
• Peraturan [@starting-style](https://caniuse.com/mdn-css_at-rules_starting-style) telah diperkenalkan dalam Chrome 117. Ia disokong sepenuhnya pada semua penyemak imbas utama selain Firefox, di mana ia berfungsi belum menyokong animasi dari paparan: tiada
• calc-size() ialah ciri terbaharu, diperkenalkan dalam Chrome 129 dan pada masa ini hanya disokong dalam Chrome dan Edge. Walau bagaimanapun, pelayar utama lain akan menyokongnya tidak lama lagi

Kesimpulan

Dalam artikel ini, kami meneroka cabaran yang dihadapi oleh pembangun apabila menganimasikan sifat CSS seperti paparan dan saiz elemen. Kaedah tradisional memerlukan penyelesaian yang kompleks dengan CSS dan JavaScript untuk mencapai animasi bagi sifat yang tidak boleh dianimasikan secara langsung.

Ciri baharu, seperti animasi paparan dengan bingkai utama, fungsi calc-size() dan sifat peralihan-tingkah laku, menjadikan animasi ini lebih mudah dicapai. Fungsi ini menghapuskan keperluan untuk JavaScript, membolehkan animasi CSS yang lebih ringkas.

---

Adakah bahagian hadapan anda memonopoli CPU pengguna anda?

Memandangkan bahagian hadapan web semakin kompleks, ciri tamak sumber menuntut lebih banyak lagi daripada penyemak imbas. Jika anda berminat untuk memantau dan menjejaki penggunaan CPU pihak pelanggan, penggunaan memori dan banyak lagi untuk semua pengguna anda dalam pengeluaran, cuba LogRocket.

LogRocket adalah seperti DVR untuk apl web dan mudah alih, merakam semua yang berlaku dalam apl web, apl mudah alih atau tapak web anda. Daripada meneka sebab masalah berlaku, anda boleh mengagregat dan melaporkan metrik prestasi bahagian hadapan utama, memainkan semula sesi pengguna bersama-sama dengan keadaan aplikasi, log permintaan rangkaian dan secara automatik memaparkan semua ralat.

Modenkan cara anda menyahpepijat web dan apl mudah alih — mula memantau secara percuma.

Atas ialah kandungan terperinci Memudahkan animasi CSS dengan ciri paparan dan saiz. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!