Wawancara Frontend: Bagaimana cara menggunakan CSS @starting-style untuk transisi masuk yang andal?

1. Pertanyaan dan konteks

Sebuah halaman admin memiliki elemen dialog dan menu popover. Desain tersebut membutuhkan transisi masuk (entry) dan keluar (exit) tanpa JavaScript yang mengubah gaya di setiap frame; browser lama harus tetap dapat digunakan, dan pengguna yang mengurangi gerakan tidak boleh dipaksa melihat animasi yang kuat. Jelaskan batasan dari @starting-style, pembagian CSS/skrip, perilaku fallback, dan validasi.

2. Apa yang dievaluasi oleh pewawancara

• Mengetahui bahwa pembaruan gaya pertama tidak memiliki computed style sebelumnya untuk transisi dan bahwa @starting-style menyediakan titik awal.
• Membedakan antara entry dan exit, display diskret, elemen top-layer, dan transisi opacity/transform biasa.
• Menjaga skrip tetap bertanggung jawab atas perubahan status sementara platform menangani fokus, Escape, semantik, dan preferensi gerakan.
• Merancang pemeriksaan kapabilitas, race condition akibat pembatalan, reduced motion, dan verifikasi pada browser nyata alih-alih hanya menempelkan CSS.

3. Pertanyaan untuk diklarifikasi terlebih dahulu

1. Apakah ini elemen dialog, popover, atau node biasa? Perilaku top-layer dan fokus default mengubah desain.
2. Apakah node harus tetap ada sampai animasi keluar selesai, atau langsung menjadi non-interaktif? Hal ini mengubah display dan batasan event.
3. Apakah browser lama harus menampilkan hasil statis, beralih secara instan, atau cocok secara piksel presisi?
4. Dengan prefers-reduced-motion, apakah durasi harus dipersingkat, pergerakan dihilangkan, atau semua transisi dihapus?

4. Jawaban 30 detik

Saya akan membiarkan status dan semantik HTML mengontrol visibilitas, fokus, dan penutupan, sementara CSS mengontrol transisi visual yang dapat dibalik (reversible). Gunakan @starting-style untuk memberikan nilai opacity dan transform sebelum pembaruan terlihat yang pertama; gunakan allow-discrete atau jalur kompatibilitas untuk display agar elemen tetap dapat dirender selama transisi. Transisi keluar memerlukan status akhir yang eksplisit dan masa hidup DOM, bukan hanya aturan awal. Browser lama beralih secara instan, pengguna reduced-motion mendapatkan animasi yang lebih pendek atau ditiadakan, dan pengujian keyboard, screen-reader, serta race condition memvalidasi hasilnya.

5. Jawaban langkah demi langkah

Langkah 1: Tentukan batasan status dan semantik

dialog.showModal(), status terbuka popover, dan peralihan class memiliki semantik yang berbeda. Pastikan kontrol yang tertutup tidak dapat menerima fokus, kontrol yang terbuka mendapatkan target fokus yang sesuai, serta event Escape dan pembatalan berfungsi. Animasi mencerminkan status; animasi tidak boleh menentukan status aksesibilitas. Skrip harus memanggil API platform atau mengubah atribut status, bukan menyimulasikan visibilitas dengan timer.

Langkah 2: Buat titik awal masuk (entry)

Pada pembaruan gaya pertama, browser mungkin tidak memiliki gaya sebelumnya, sehingga transisi biasa tidak memiliki titik asal. Tempatkan nilai awal di @starting-style:

.dialog {
  opacity: 1;
  transform: scale(1);
  transition: opacity 180ms ease, transform 180ms ease;
}

@starting-style {
  .dialog[open] {
    opacity: 0;
    transform: scale(0.96);
  }
}

Aturan awal berlaku untuk pembaruan gaya pertama, bukan sebagai status tertutup yang persisten. Jika komponen dimasukkan kembali, apakah animasi masuk berjalan bergantung pada siklus hidup dan operasi DOM-nya; jangan berasumsi setiap peralihan atribut memicu aturan awal.

Langkah 3: Tangani properti diskret dan transisi keluar (exit)

display tidak dapat diinterpolasi seperti opacity. Jaga agar elemen tetap dapat dirender selama transisi dan alihkan ke status tidak tersedia pada titik diskret; browser yang didukung dapat menggunakan transition-behavior: allow-discrete, dengan fallback instan di tempat lain. Pertahankan node yang sedang menutup sampai transisi selesai atau biarkan komponen native mengelola siklus hidupnya; jangan menebak-nebak dengan setTimeout yang tetap. Filter transitionend berdasarkan properti dan tangani pembatalan, pembukaan berulang, dan pelepasan (unmount).

Langkah 4: Pertimbangkan top layer dan interaksi

Dialog dan popover di top layer mengubah susunan (stacking), backdrop, dan perilaku fokus. Definisikan transisi konten dan ::backdrop secara terpisah, lalu uji klik di luar, Escape, penguncian scroll, dan beberapa instance. Skrip harus mempertahankan panggilan API, pembatalan, dan callback bisnis; @starting-style bukan pengganti state machine JavaScript.

Langkah 5: Hormati preferensi gerakan dan lakukan verifikasi

Di bawah @media (prefers-reduced-motion: reduce), hapus pergerakan, persingkat durasi, atau nonaktifkan transisi sambil tetap mempertahankan umpan balik status. Uji pembukaan pertama, pembukaan kembali, peralihan cepat, navigasi saat menutup, kegagalan skrip, browser lama, keyboard, pembaca layar, backdrop, dan pengembalian fokus. Lacak pembatalan, transisi yang terputus, residu node tersembunyi, dan regresi aksesibilitas alih-alih hanya memeriksa tangkapan layar.

6. Contoh jawaban

Saya akan mulai dengan semantik: API dialog atau popover native ditambah sedikit skrip mengelola status terbuka, fokus, dan Escape; CSS hanya menampilkan status tersebut. Transisi normal tidak memiliki gaya lama pada pembaruan pertama, sehingga @starting-style menyediakan titik asal opacity dan transform. display bersifat diskret, jadi gunakan perilaku transisi diskret yang didukung atau beralih secara instan di browser lama. Pertahankan node yang menutup sampai transisi berakhir daripada menebak-nebak dengan timer. Definisikan konten top-layer dan backdrop secara terpisah, lalu uji reduced motion, peralihan cepat, keyboard, dan pembaca layar.

7. Kesalahan umum

• Memperlakukan aturan awal sebagai status tertutup: Peralihan berikutnya akan memiliki status yang salah; pisahkan nilai persisten, masuk, dan status tertutup akhir.
• Menerapkan transisi opacity biasa ke display: Elemen menghilang terlalu cepat atau tetap interaktif; gunakan perilaku diskret dan fallback.
• Menghapus node dengan setTimeout: Pengaturan pengguna, pembatalan, atau frame yang terlewat membuat siklus hidup tidak sinkron; gunakan event transisi yang valid atau siklus hidup native.
• Membiarkan animasi mengontrol fokus dan semantik: Teknologi asistif mengikuti pengaturan waktu visual; tetapkan status HTML/API terlebih dahulu.
• Mengabaikan reduced motion: Preferensi dilanggar; persingkat atau hapus gerakan sambil tetap menjaga umpan balik status yang jelas.

8. Pertanyaan lanjutan dan jawabannya

Pertanyaan lanjutan 1: Mengapa transisi biasa tidak cukup untuk fade-in pertama?

Sebelum pembaruan gaya pertama, mungkin tidak ada computed style sebelumnya untuk dibandingkan, sehingga browser langsung menerapkan nilai akhir. @starting-style menyediakan titik asal tersebut; ini tidak mendefinisikan setiap status penutupan berikutnya.

Pertanyaan lanjutan 2: Bagaimana display dapat berpartisipasi dalam exit?

Jaga agar elemen tetap dapat dirender selama transisi dan alihkan display pada titik diskret. Gunakan allow-discrete jika didukung dan tutup secara instan di browser lain, sambil memastikan elemen yang tertutup tidak dapat menerima fokus atau interaksi pointer.

Pertanyaan lanjutan 3: Apa yang terjadi saat perubahan buka-tutup-buka berlangsung cepat?

Status dapat berbalik sebelum transisi sebelumnya selesai. Batalkan proses animasi yang usang, baca status saat ini, dan biarkan status terbaru menjadi satu-satunya yang diterapkan; jangan menjalankan dua timer yang menghapus dan membuka kembali node secara independen. Uji klik bergantian, Escape, dan pembersihan navigasi.