Gerakan adalah bagian inti dari pengalaman digital apa pun, yang memandu pengguna Anda dari satu interaksi ke interaksi berikutnya. Namun ada beberapa celah dalam animasi yang halus di platform web. Ini mencakup kemampuan untuk menganimasikan animasi masuk dan keluar dengan mudah, serta menganimasikan ke dan dari lapisan atas dengan lancar untuk elemen yang bisa ditutup seperti dialog dan popover.
Untuk mengisi kekurangan ini, Chrome 116 dan 117 menyertakan empat fitur platform web baru, yang memungkinkan animasi dan transisi yang mulus untuk properti terpisah.
Keempat fitur baru ini mencakup:
- Kemampuan untuk menganimasikan
displaydancontent-visibilitypada linimasa keyframe (Dari Chrome 116). - Properti
transition-behaviordengan kata kunciallow-discreteuntuk mengaktifkan transisi properti terpisah sepertidisplay(Dari Chrome 117). - Aturan
@starting-styleuntuk menganimasikan efek entri daridisplay: nonedan ke lapisan teratas (Dari Chrome 117). - Properti
overlayuntuk mengontrol perilaku lapisan atas selama animasi (Dari Chrome 117). ## Menampilkan animasi dalam keyframe
Mulai Chrome 116, Anda dapat menggunakan display dan content-visibility dalam aturan keyframe. Ini kemudian akan bertukar pada saat keyframe terjadi. Tidak diperlukan nilai baru tambahan untuk mendukung ini:
.card {
animation: fade-out 0.5s forwards;
}
@keyframes fade-out {
100% {
opacity: 0;
display: none;
}
}
Contoh sebelumnya menganimasikan opasitas ke 0 selama durasi 0,5 detik dan kemudian menyetel tampilan ke tidak ada. Selain itu, kata kunci forwards memastikan animasi tetap berada di status akhirnya, sehingga elemen yang diterapkan tetap display: none dan opacity: 0.
Ini adalah contoh sederhana yang meniru tindakan yang dapat Anda lakukan dengan transisi (lihat demo di bagian transisi). Namun, transisi tidak dapat membuat animasi yang lebih kompleks, seperti contoh berikut:
.card {
animation: spin-and-delete 1s ease-in forwards;
}
@keyframes spin-and-delete {
0% {
transform: rotateY(0);
filter: hue-rotate(0);
}
80% {
transform: rotateY(360deg);
filter: hue-rotate(180deg);
opacity: 1;
}
100% {
opacity: 0;
display: none;
}
}
Animasi spin-and-delete adalah animasi keluar. Pertama, kartu akan berputar pada sumbu y, dijalankan melalui rotasi hue, lalu pada 80% melalui linimasa, transisi opasitasnya dari 1 ke 0. Terakhir, kartu akan beralih dari display: block menjadi display: none.
Untuk animasi keluar ini, daripada menerapkannya langsung ke elemen, Anda dapat menyiapkan pemicu untuk animasi. Misalnya dengan melampirkan pemroses peristiwa ke tombol yang memicu class untuk menerapkan animasi, seperti berikut:
.spin-out {
animation: spin-and-delete 1s ease-in forwards;
}
document.querySelector('.delete-btn').addEventListener('click', () => {
document.querySelector('.card').classList.add('spin-out');
})
Contoh di atas sekarang memiliki status akhir display:none. Ada banyak kasus di mana Anda ingin melangkah lebih jauh dan menghapus node DOM dengan waktu tunggu agar animasi selesai terlebih dahulu.
Mentransisi animasi diskret
Berbeda dengan saat menganimasikan properti terpisah dengan keyframe, untuk mentransisikan properti terpisah, Anda harus menggunakan mode perilaku transisi allow-discrete.
Properti transition-behavior
Mode allow-discrete adalah yang memungkinkan transisi terpisah, dan merupakan nilai dari properti transition-behavior. transition-behavior menerima dua nilai: normal dan allow-discrete.
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
.card.fade-out {
opacity: 0;
display: none;
}
Singkatan transition juga menetapkan nilai ini sehingga Anda dapat menghilangkan properti dan menggunakan kata kunci allow-discrete di akhir singkatan transition untuk setiap transisi.
.card {
transition: opacity 0.5s, display 0.5s allow-discrete;
}
.card.fade-out {
opacity: 0;
display: none;
}
Jika menganimasikan beberapa properti terpisah, Anda harus menyertakan allow-discrete setelah setiap properti yang ingin dianimasikan. Contoh:
.card {
transition: opacity 0.5s, display 0.5s allow-discrete, overlay 0.5s allow-discrete;
}
.card.fade-out {
opacity: 0;
display: none;
}
Aturan @starting-style untuk animasi entri
Sejauh ini, artikel ini telah membahas animasi keluar. Untuk membuat animasi entri, Anda harus menggunakan aturan @starting-style.
Gunakan @starting-style untuk menerapkan gaya yang dapat dicari browser sebelum elemen dibuka di halaman. Ini adalah status "sebelum terbuka" (tempat Anda membuat animasi darinya).
/* 0. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 1. IS-OPEN STATE */
/* The state at which the element is open + transition logic */
.item {
height: 3rem;
display: grid;
overflow: hidden;
transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}
/* 2. EXITING STATE */
/* While it is deleting, before DOM removal in JS, apply this
transformation for height, opacity, and a transform which
skews the element and moves it to the left before setting
it to display: none */
.is-deleting {
opacity: 0;
height: 0;
display: none;
transform: skewX(50deg) translateX(-25vw);
}
Sekarang Anda memiliki status masuk dan keluar untuk item daftar TODO ini:
Menganimasikan elemen ke dan dari lapisan teratas
Untuk menganimasikan elemen ke dan dari lapisan teratas, tentukan @starting-style pada status "terbuka" untuk memberi tahu browser tempat menganimasikan. Untuk dialog, status terbuka ditentukan dengan atribut [open]. Untuk popover, gunakan class pseudo :popover-open.
Contoh dialog sederhana bisa terlihat seperti ini:
/* 0. BEFORE-OPEN STATE */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* 1. IS-OPEN STATE */
dialog[open] {
translate: 0 0;
}
/* 2. EXIT STATE */
dialog {
transition: translate 0.7s ease-out, overlay 0.7s ease-out allow-discrete, display 0.7s ease-out allow-discrete;
translate: 0 100vh;
}
Pada contoh berikutnya, efek masuk dan keluar berbeda. Masuk dengan menganimasikan ke atas dari bagian bawah area pandang, keluar dari efek ke bagian atas area pandang. Ini juga ditulis dengan CSS bertingkat untuk enkapsulasi visual yang lebih banyak.
Saat menganimasikan popover, gunakan class pseudo :popover-open, bukan atribut open yang digunakan sebelumnya.
.settings-popover {
&:popover-open {
/* 0. BEFORE-OPEN STATE */
/* Initial state for what we're animating *in* from,
in this case: goes from lower (y + 20px) to center */
@starting-style {
transform: translateY(20px);
opacity: 0;
}
/* 1. IS-OPEN STATE */
/* state when popover is open, BOTH:
what we're transitioning *in* to
and transitioning *out* from */
transform: translateY(0);
opacity: 1;
}
/* 2. EXIT STATE */
/* Initial state for what we're animating *out* to ,
in this case: goes from center to (y - 50px) higher */
transform: translateY(-50px);
opacity: 0;
/* Enumerate transitioning properties,
including display and allow-discrete mode */
transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}
Properti overlay
Terakhir, untuk memudarkan popover atau dialog dari lapisan atas, tambahkan properti overlay ke daftar transisi Anda. popover dan dialog meng-escape klip dan transformasi ancestor, serta menempatkan konten di lapisan atas. Jika Anda tidak melakukan transisi overlay, elemen akan langsung kembali terpotong, diubah, dan ditutupi, dan Anda tidak akan melihat transisi terjadi.
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
Sebagai gantinya, sertakan overlay dalam transisi atau animasi untuk menganimasikan overlay bersama dengan fitur lainnya dan memastikannya tetap berada di lapisan atas saat menganimasikan. Ini akan terlihat
jauh lebih lancar.
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
Selain itu, ketika Anda memiliki beberapa elemen terbuka di lapisan teratas, overlay membantu mengontrol transisi yang lancar dan keluar dari lapisan atas. Anda dapat melihat perbedaannya dalam contoh sederhana ini. Jika Anda tidak menerapkan overlay ke popover kedua saat mentransisikannya, pop-up tersebut akan keluar dari lapisan atas terlebih dahulu, melompat di belakang popover lainnya, sebelum memulai transisi. Efek ini bukan efek yang sangat halus.
Catatan tentang transisi tampilan
Jika Anda membuat perubahan DOM, seperti menambahkan dan menghapus elemen dari DOM, solusi hebat lainnya untuk animasi yang mulus adalah transisi tampilan. Berikut adalah dua contoh di atas yang dibuat menggunakan transisi tampilan.
Dalam demo pertama ini, transisi tampilan akan menangani transisi ini, bukan menyiapkan @starting-style dan transformasi CSS lainnya. Transisi tampilan disiapkan seperti berikut:
Pertama, di CSS, berikan view-transition-name satu per satu untuk setiap kartu.
.card-1 {
view-transition-name: card-1;
}
.card-2 {
view-transition-name: card-2;
}
/* etc. */
Kemudian, di JavaScript, gabungkan mutasi DOM (dalam hal ini, menghapus kartu), dalam transisi tampilan.
deleteBtn.addEventListener('click', () => {
// Check for browser support
if (document.startViewTransition) {
document.startViewTransition(() => {
// DOM mutation
card.remove();
});
}
// Alternative if no browser support
else {
card.remove();
}
})
Sekarang, browser dapat menangani fade out dan morph setiap kartu ke posisi barunya.
Contoh lain yang dapat membantu adalah dengan demo tambahkan/hapus item daftar. Dalam hal ini, Anda harus ingat untuk menambahkan view-transition-name unik untuk setiap kartu yang dibuat.
Kesimpulan
Fitur platform baru ini membawa kita selangkah lebih dekat untuk memperlancar animasi masuk dan keluar di platform web. Untuk mempelajari lebih lanjut, buka link berikut: