Sekarang di Dasar Pengukuran: menganimasikan efek entri

Una Kravets

Postingan empat fitur CSS baru untuk efek masuk dan keluar membagikan beberapa fitur berguna yang baru saja hadir di Chrome. Sekarang, dua fitur ini, @starting-style dan transition-behavior: allow-discrete telah menjadi Baseline Newly Available dengan dirilisnya Firefox 129. Anda kini dapat membuat efek animasi entri untuk elemen, termasuk yang dianimasikan dari display: none, dan menganimasikan ke lapisan atas.

Menyiapkan efek entri dengan @starting-style

Aturan @starting-style menentukan gaya awal pada elemen sebelum dirender di halaman. Hal ini diperlukan untuk elemen yang dianimasikan dari display: none, karena elemen tersebut memerlukan status untuk animasi.

Gunakan @starting-style seperti aturan lainnya di CSS, dengan menempatkan gaya elemen di dalamnya. Misalnya, dengan <dialog>, tempatkan gaya dialog[open] dalam aturan @starting-style. Ini adalah gaya yang digunakan sebelum dialog terbuka.

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

Mengaktifkan animasi terpisah dengan allow-discrete

Hal kedua yang diperlukan untuk mendukung animasi entri untuk elemen yang dianimasikan dari display: none, seperti dialog dan popover, adalah mengaktifkan mode animasi baru, untuk mendukung animasi properti terpisah. Properti diskret adalah properti yang tidak dapat berinterpolasi antar nilai. Anda dapat menganggap ini seperti tombol aktif/nonaktif. Beberapa contoh mencakup display, visibility, mix-blend-mode—properti apa pun yang fiturnya merupakan satu nilai atau lainnya. Dengan mode animasi baru ini, browser kini mendukung penukaran nilai pada titik 50%, bukan pada titik 0% transisi.

Gunakan salah satu dari dua cara berikut untuk menganimasikan efek entri untuk elemen display: none dan visibility: hidden:

• Properti mandiri transition-behavior dengan nilai allow-discrete.
• Nilai allow-discrete dalam singkatan transisi Anda.

Kami merekomendasikan metode kedua, karena menerapkan transition-behavior disertakan dalam singkatan transition. Jika Anda menerapkan transition-behavior: allow-discrete sebelum singkat transisi tempat Anda menerapkan fungsi transisi, pengaturan waktu, dan easing, browser akan mengabaikan transition-behavior.

Jika menggunakan cara ini secara singkat, Anda hanya perlu menerapkan kata kunci allow-discrete ke properti tertentu yang memerlukan animasi terpisah. Hal ini ditunjukkan dalam CSS berikut yang mentransisikan properti translate dan properti display, tetapi hanya menerapkan kata kunci allow-discrete ke properti display.

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

Demo: menyatukan semuanya

Penggunaan fitur ini sangat berguna untuk elemen lapisan atas, seperti elemen <dialog> atau komponen yang menggunakan atribut popover. Pada contoh berikut, elemen <dialog> dianimasikan dari bagian bawah area tampilan (awalnya dimulai dari terjemahan vertikal 100 vh di luar layar), ke tengah area pandang, sehingga menghapus terjemahan saat <dialog> terbuka.

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

Anda dapat menulis ini secara lebih ringkas dengan CSS nesting, yang juga merupakan fitur Dasar Pengukuran yang baru tersedia.

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}

Kesimpulan

Sangat menarik melihat progres seperti ini di Baseline, dan setidaknya, ini adalah progressive enhancement yang bagus untuk elemen-elemen tersebut. Tanpa fitur efek entri ini, elemen yang dianimasikan ke lapisan atas atau dari gaya display: none hanya akan muncul di halaman Anda tanpa transisi, seperti yang terjadi saat ini.

Untuk mempelajari cara menambahkan efek keluar dengan cara yang semakin baik, lihat artikel "Empat fitur CSS baru untuk animasi masuk dan keluar yang lancar", dan untuk mempelajari lebih lanjut tentang fitur ini, lihat referensi dokumentasi berikut:

• @starting-style di MDN
• perilaku transisi di MDN