Transisi CSS berjalan ketika properti berubah antara dua status yang dirender. Mereka tidak pernah berlari saat masuk, karena frame pertama suatu elemen sudah final; jadi setiap animasi terbuka di web berada dalam animasi keyframe atau JavaScript. at-rules memperbaiki separuh yang hilang.

dialog {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.3s, translate 0.3s;
}

dialog[open] {
  @starting-style {
    opacity: 0;
    translate: 0 1rem;
  }
}

Mengapa ini mengalahkan keyframe

  • Bingkai pertama elemen mendapatkan nilai awal; properti transisi kemudian dianimasikan ke keadaan terbuka dengan easing yang sama yang sudah Anda gunakan.
  • Ini disusun dengan transisi tampilan dan popover: transisi tampilan membiarkan elemen dianimasikan dari display:none, yang digunakan untuk memblokir transisi secara keras.
  • Keluarnya menggunakan aturan transisi reguler, jadi masuk dan keluar berbagi satu sumber kebenaran, bukan satu animasi dan satu peretasan terbalik.
  • Bungkus semuanya dalam kueri media yang lebih disukai dengan gerakan yang dikurangi dan animasinya dinonaktifkan untuk pembaca yang memilih untuk tidak ikut.

Resep adopsi

  1. Pilih popover dan dialog Anda terlebih dahulu: popover dan dialog tersebut sudah memiliki status terbuka yang dikontrol aplikasi, sehingga kemenangan dapat segera diraih.
  2. Tulis gaya istirahat, lalu tambahkan blok awal hanya dengan properti yang akan Anda transisi.
  3. Tambahkan perilaku transisi: izinkan-diskrit ke transisi tampilan mana pun, atau animasi penutupan akan terhenti.
  4. Uji keyboard, Escape, dan pengurangan gerakan; platform ini memiliki paling banyak satu celah pemolesan, dan itu adalah QA Anda yang harus disebutkan.

Antara gaya dialog, popover, dan awal, animasi entri kini berupa tiga deklarasi pada halaman statis. Menu situs ini terbuka dengan transisi seperti itu, dan fakta bahwa tidak ada skrip yang mengetahuinya sungguh gacor dari segi desain.