Sederhanakan animasi CSS menggunakan properti tampilan dan ukuran – Beragampengetahuan

Sampai saat ini, hanya sejumlah properti CSS yang dapat dianimasikan. Misalnya, untuk membuat efek fade-in atau fade-out, biasanya Anda menggunakan opacity atribut alih-alih display properti, karena yang terakhir tidak dapat dianimasikan. Namun masalahnya adalah meskipun elemen tersebut tersembunyi secara visual, elemen tersebut masih ada di halaman.

Baru-baru ini, Chrome memperkenalkan fitur baru untuk mengatasi masalah ini dan mempermudah proses pengembangan. Pada artikel ini, kami akan membandingkan metode tradisional untuk menganimasikan properti tampilan dan ukuran dengan fitur-fitur baru ini.

masalah animasi display dan ukuran elemen

Kemungkinannya adalah, Anda harus menggunakan CSS untuk membuat efek fade-in/fade-out pada beberapa elemen di beberapa titik. Metode yang disukai adalah dengan menerapkan animasi atau transisi ke elemen opacity. Namun mengatur opacity ke nol tidak benar-benar menghapus elemen – itu hanya membuatnya tidak terlihat. Seringkali, ini sudah cukup.

Namun katakanlah Anda memiliki daftar tugas di mana pengguna dapat menghapus item. Jika Anda ingin membuat animasi keluar untuk membuat item memudar, Anda biasanya menggunakan opacity. Namun jika daftarnya perlu disesuaikan tingginya, Anda juga perlu mengaturnya display tiba none. Masalahnya di sini adalah meskipun item tersebut menghilang secara visual, item tersebut masih memakan ruang di DOM dan mengganggu hal-hal seperti tata letak dan interaksi pengguna.

Berikut adalah perbandingan kedua metode secara berdampingan: Hanya satu metode yang digunakan opacitykombinasi lain opacity Dan display. Anda dapat mencoba contoh berikut untuk melihat perbedaannya:

lihat pena
Perbandingan aplikasi agenda sederhana oleh Saleh-Mubahar (@saleh-mubahar)
di CodePen.

Perhatikan bagaimana tata letaknya berubah saat digabungkan display Dan opacitygunakan keduanya opacity Ini saja akan meninggalkan kesenjangan dalam daftar. Dan metode kedua (opacity + display) memperbaiki masalah tata letak yang mengganggu efek fade-out halus karena display: none Diterapkan sebelum fade berakhir. Hal ini menyebabkan pemudaran tiba-tiba, bukan pemudaran bertahap.

Misalnya, opacity Properti dapat dialihkan dengan lancar 0 tiba 1. Namun, display Properti tidak dapat dianimasikan karena tidak memiliki rentang numerik – statusnya biner, mis. none, blockatau nilai lainnya. Karena tidak ada nilai perantara, CSS tidak bisa display.

Demikian pula, pengembang sering kali menghadapi tantangan saat mencoba menganimasikan ukuran intrinsik suatu elemen, misalnya. height: auto. Ini sering digunakan untuk transisi pada bagian yang dapat dilipat (seperti akordeon) yang tingginya berkisar 0px Meluas saat ditutup dan melebar agar sesuai dengan konten saat dibuka. Meskipun atribut ukuran seperti height Biasanya dapat dianimasikan (karena memiliki nilai awal dan akhir numerik), dianimasikan ke atau dari auto menciptakan masalah. Browser tidak dapat menghitung jumlah langkah di antaranya 0px Dan auto; Jadi solusi yang kompleks harus digunakan.

Solusi animasi tradisional display dan ukuran

Ada banyak cara untuk menghadapi tantangan produksi animasi display dan ukuran elemen. Di bagian ini, kita akan membahas solusi paling populer menggunakan CSS dan JavaScript.

Solusi berbasis CSS

Ada beberapa cara untuk mengatasi ketidakmampuan menganimasikan properti tampilan menggunakan CSS. Yang paling dapat diandalkan adalah dengan menggunakan opacity dan properti ukuran, mis. height atau width. Dalam hal ini, atribut size digunakan untuk menghapus elemen dari DOM secara efektif. Ini dapat dilakukan dengan menggunakan transition-delay milik. Pada dasarnya, kami menambahkan penundaan pada transisi ukuran yang sama dengan waktu yang ditetapkan untuk transisi opacity. Setelah sebuah elemen memudar, ukurannya segera disetel ke nol, secara efektif menghapusnya dari tata letak, misalnya display: none telah diterapkan.

Menggunakan daftar tugas sebagai contoh lagi, implementasinya akan terlihat 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, triknya adalah mengatur height Dan padding tiba 0 Setelah penundaan, opacity memudar 0. Penundaan dan opasitas harus sama panjangnya – dalam hal ini 400 milidetik. ini height: 0 Pastikan item daftar tidak berinteraksi dengan tata letak. Seperti yang dibahas sebelumnya, height: auto Menyesuaikan secara dinamis berdasarkan konten; oleh karena itu, tidak dapat dianimasikan. Oleh karena itu, Anda perlu memastikan bahwa elemen tersebut memiliki ketinggian tetap tertentu agar animasi dapat berfungsi dengan baik.

Menyetel visibilitas ke tersembunyi adalah metode umum lainnya. Namun hal ini tidak menghilangkan elemen dari DOM, tetap mempengaruhi tata letak seperti biasa, yaitu mempengaruhi posisi elemen di sekitarnya.

Solusi CSS paling umum untuk menganimasikan elemen ke ukuran intrinsiknya (atau height: auto) sedang menggunakan max-height alih-alih height. Ini bukan implementasi yang paling bersih, namun berhasil menyelesaikan pekerjaan. Anda pada dasarnya mengatur max-height ke nilai yang lebih besar dari nilai yang didapat elemen tersebut. Dengan cara ini, ia meniru transisi yang mulus, mirip dengan animasi dengan ketinggian tetap:

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

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

Kerugian paling jelas dari pendekatan ini adalah Anda harus memastikan max-height Selalu lebih besar dari konten sebenarnya dalam elemen. Masalah lainnya adalah kecuali tinggi konten sama persis, waktu transisi mungkin terasa tidak akurat. max-height nilai.

Katakanlah konten Anda memiliki tinggi 400 piksel, tetapi Anda menetapkannya max-height hingga 1000 piksel. Secara teknis, animasi akan terus diputar sepanjang durasi (katakanlah dua detik). Namun secara visual, elemen tersebut berhenti tumbuh setelah mencapai tinggi konten sebenarnya (400 piksel), dan max-height Terus bertransisi ke 1000px. Oleh karena itu, dalam hal ini, durasi transisi akan lebih pendek dari waktu yang Anda tentukan.

metode JavaScript

Semua solusi CSS yang dibahas di atas cukup kompleks dan dapat memberikan hasil yang tidak terduga. Sampai saat ini, cara paling andal untuk mencapai hal ini adalah melalui JavaScript.

Tampilan aplikasi none Setelah mengkonversi opacity kita dapat menggunakan setInterval atau setTimeout Fungsi menambahkan penundaan yang sesuai dengan durasi transisi opacity. Setelah penundaan ini, Anda dapat mengatur tampilan menjadi none. Berikut ini contohnya:

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
});

Dalam kode ini, ketika tombol diklik, elemen memudar sesaat dan kemudian menghilang display diatur ke none Segera – pada dasarnya hapus dari tata letak.

Demikian pula, untuk menganimasikan dimensi intrinsik, kita dapat menghitung tinggi suatu elemen dalam JavaScript dan menggunakan nilai tersebut sebagai titik akhir dari tingginya. Metode ini lebih dapat diandalkan dan akurat. Namun, harap diingat bahwa kami masih melakukan animasi height milik.

Manfaat nyata di sini adalah Anda dapat mengatur ketinggian secara dinamis berdasarkan konten sebenarnya dari elemen, memastikan transisi sesuai dengan ketinggian sebenarnya daripada menebak-nebak. max-height.

Anda dapat melakukan ini:

document.getElementById("toggleButton").addEventListener("click", function () {
  const el = document.querySelector(".expandable");
  const contentHeight = el.scrollHeight;
  el.style.height = contentHeight + "px";
  el.addEventListener("transitionend", function (e) {
    el.removeEventListener("transitionend", arguments.callee);
    el.style.height = "auto";
  });
});

Dalam contoh ini kita memperluas bagian yang dimulai dengan ketinggian 0. kami menggunakan scrollHeight Dapatkan keseluruhan konten dan gunakan sebagai titik akhir transisi. Setelah konversi selesai, kami mengganti ketinggiannya menjadi autoyang memungkinkan browser menyesuaikan tinggi wadah secara otomatis berdasarkan kontennya. Langkah ini bersifat opsional, namun berguna jika Anda memperkirakan isi wadah akan berubah seiring waktu.

Fitur CSS baru untuk animasi display dan sifat ukuran intrinsik

Sekarang mari kita lihat fitur CSS baru yang baru saja dirilis atau akan dirilis ke browser. Alat-alat baru ini menghilangkan kebutuhan akan JavaScript dalam skenario yang telah kita diskusikan sebelumnya dan membantu Anda menulis CSS yang lebih rapi dan pendek.

Tampilan dan bingkai utama

ini @keyframes at-rule memungkinkan Anda membuat animasi dengan mengontrol langkah-langkah perantara dalam urutan animasi. Pembaruan terbaru memungkinkan Anda untuk menganimasikan display Dan content-visibility Properti dalam timeline keyframe.

Kami tidak melakukan interpolasi antar tampilan none Dan block (Karena itu tidak mungkin). Sebagai gantinya, kami menunggu hingga semua efek lainnya selesai dan kemudian mengubah status tampilan. Ini mirip dengan apa yang kami lakukan dengan JavaScript – tunggu hingga transformasi selesai sebelum menerapkannya display: none — Tapi sekarang jauh lebih mudah dengan CSS.

Blog Pengembang Chrome memiliki demo keren yang memperjelas:

lihat pena
Kartu Pudar – Animasi untuk web.dev (@web-dot-dev)
di CodePen.

Pertama, atur opacity menjadi 0 lebih dari 250 milidetik. Setelah urutannya selesai, tampilan langsung disetel ke none:

.fade-out {
  animation: fade-out 0.25s forwards;
}

/* Keyframe animations */
@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}

Kemenangan terbesar di sini melibatkan animasi yang lebih kompleks display Properti, yang hingga saat ini sulit diimplementasikan menggunakan CSS (atau JavaScript), kini dapat dibuat dengan relatif mudah.

Bagaimana transition-behavior menyederhanakan display transisi

Sekarang juga dimungkinkan untuk membuat efek pudar menggunakan transisi baru transition-behavior milik. Ini memungkinkan Anda menerapkan transisi ke properti dengan perilaku animasi diskrit, misalnya. display. Dengan menggunakan allow-discreteAnda dapat menganimasikan display milik. Berikut ini contoh sederhananya:

.card {
  transition: opacity 0.5s, display 0.5s;
  transition-behavior: allow-discrete; /* this is essential */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

Masukkan animasi @starting-style

Kami telah membahas efek fade out secara ekstensif di artikel ini. Namun bagaimana dengan sebaliknya? Memasukkan animasi itu rumit dan biasanya hanya dapat dilakukan melalui JavaScript. baru @starting-style at-rule membuat segalanya lebih mudah.

Seperti namanya, kita dapat menggunakannya untuk menerapkan gaya pada elemen yang dapat dicari browser sebelum elemen tersebut terlihat di halaman. Kita dapat mengatur keadaan awal animasi di sini. Setelah elemen dirender, elemen tersebut bertransisi kembali ke keadaan defaultnya.

Berikut ini contoh dasarnya:

.card {
  @starting-style {
    opacity: 0;
  }

  opacity: 1;
  transition: opacity 0.5s;
}

Setelah DOM dimuat, kartu akan menghilang. Anda dapat menggunakan @starting-style Cocok untuk semua jenis animasi pengantar. Berikut contoh bagus lainnya dari tim pengembangan Chrome:

lihat pena
Konversi proyek untuk web.dev (@web-dot-dev)
di CodePen.

Gunakan dimensi intrinsik animasi calc-size() Fungsi

ini calc-size fungsi, mirip dengan calc()baru-baru ini diperkenalkan di Chrome 129. Sederhananya, ini memungkinkan melakukan operasi matematika pada ukuran intrinsik dengan aman dan andal. Saat ini empat operasi kata kunci didukung: auto, min-content, max-contentDan fit-content. Hal ini sangat berguna untuk menganimasikan elemen atau mengubah ukuran intrinsiknya.

calc-size Mengizinkan ketinggian apa pun yang saat ini dapat ditentukan dalam CSS untuk dianimasikan ke nol atau ke/dari nilai tetap yang kecil. Berikut adalah contoh sederhana memperluas bagian yang dapat diciutkan height: 0 tiba auto:

.card { 
  height: 0; 
}

.card.open { 
  height: calc-size(auto);
}

Kompatibilitas peramban

Sebagian besar fitur ini terutama digunakan untuk menyempurnakan animasi daripada komponen DOM yang diperlukan, namun karena fitur ini relatif baru, masih ada baiknya memeriksa kompatibilitas browser:

• ini display properti adalah @keyframe Dapat dianimasikan di Chrome 116+ dan Opera 102+. Dukungan Firefox masih dalam pengembangan, Safari sedang dalam pengembangan
• ini transition-behavior Properti ini pertama kali dirilis di Chrome 117. Ini kompatibel dengan semua browser utama kecuali Firefox, yang saat ini sedang dalam pengembangan
• ini @starting-style at-rule diperkenalkan di Chrome 117. Ini didukung penuh oleh semua browser utama kecuali Firefox, yang belum mendukung animasi display: none
• calc-size() Ini adalah fitur terbaru yang diperkenalkan di Chrome 129 dan saat ini hanya didukung di Chrome dan Edge. Namun, browser besar lainnya akan segera mendukungnya

sebagai kesimpulan

Dalam artikel ini, kami mengeksplorasi tantangan yang dihadapi pengembang saat menganimasikan properti CSS, seperti display dan ukuran elemen. Pendekatan tradisional memerlukan solusi rumit menggunakan CSS dan JavaScript untuk menganimasikan properti yang tidak dapat dianimasikan secara langsung.

Fitur baru seperti animasi display Melalui bingkai utama, calc-size() fungsi, dan transition-behavior properti untuk membuat animasi ini lebih mudah diimplementasikan. Fungsi-fungsi ini menghilangkan kebutuhan akan JavaScript, memungkinkan animasi CSS yang lebih sederhana.