Temu duga Frontend: Bagaimanakah anda menggunakan CSS @starting-style untuk peralihan masuk yang boleh dipercayai?

1. Soalan dan konteks

Halaman pentadbir mempunyai elemen dialog dan menu popover. Reka bentuk memerlukan peralihan masuk dan keluar tanpa JavaScript menukar gaya pada setiap bingkai; pelayar lama mesti kekal boleh digunakan, dan pengguna yang mengurangkan pergerakan tidak boleh dipaksa menerima animasi yang kuat. Terangkan batasan @starting-style, pembahagian CSS/skrip, tingkah laku sandaran (fallback), dan pengesahan.

2. Perkara yang dinilai oleh penemu duga

• Mengetahui bahawa kemas kini gaya pertama tidak mempunyai computed style sebelumnya untuk peralihan dan bahawa @starting-style membekalkan titik permulaan.
• Membezakan peralihan masuk dan keluar, display diskret, elemen top-layer, dan peralihan opacity/transform biasa.
• Memastikan skrip bertanggungjawab untuk perubahan keadaan manakala platform mengendalikan fokus, Escape, semantik, dan keutamaan pergerakan.
• Mereka bentuk pemeriksaan keupayaan, perlumbaan pembatalan (cancellation races), pergerakan yang dikurangkan, dan pengesahan pelayar sebenar berbanding hanya menampal CSS.

3. Soalan untuk dijelaskan terlebih dahulu

1. Adakah ia elemen dialog, popover, atau nod biasa? Tingkah laku top-layer dan fokus lalai mengubah reka bentuk.
2. Adakah nod mesti kekal sehingga animasi keluar tamat, atau menjadi tidak interaktif serta-merta? Ini mengubah display dan batasan peristiwa.
3. Patutkah pelayar lama menunjukkan hasil statik, beralih serta-merta, atau sepadan piksel secara tepat?
4. Dengan prefers-reduced-motion, patutkah tempoh dipendekkan, pergerakan dihilangkan, atau semua peralihan dialih keluar?

4. Jawapan 30 saat

Saya akan membiarkan keadaan dan semantik HTML memiliki keterlihatan, fokus, dan penutupan, manakala CSS memiliki peralihan visual yang boleh berbalik. Gunakan @starting-style untuk menyediakan nilai kelegapan dan transformasi sebelum kemas kini kelihatan yang pertama; gunakan allow-discrete atau laluan keserasian untuk display supaya elemen kekal boleh dilukis semasa peralihan. Peralihan keluar memerlukan keadaan akhir yang jelas dan jangka hayat DOM, bukan hanya peraturan permulaan. Pelayar lama beralih serta-merta, pengguna pergerakan berkurangan mendapat animasi yang lebih pendek atau tiada langsung, dan ujian papan kekunci, pembaca skrin, serta keadaan perlumbaan mengesahkan hasilnya.

5. Jawapan langkah demi langkah

Langkah 1: Tentukan batasan keadaan dan semantik

dialog.showModal(), keadaan terbuka popover, dan togol kelas mempunyai semantik yang berbeza. Pastikan kawalan yang ditutup tidak boleh menerima fokus, kawalan yang dibuka mendapat sasaran fokus yang sesuai, dan peristiwa Escape serta cancel berfungsi. Animasi mencerminkan keadaan; ia tidak boleh menentukan keadaan kebolehcapaian. Skrip harus memanggil API platform atau menogol atribut keadaan, bukan mensimulasikan keterlihatan dengan pemasa.

Langkah 2: Cipta titik permulaan masuk

Pada kemas kini gaya pertama, pelayar mungkin tidak mempunyai gaya sebelumnya, jadi peralihan biasa tidak mempunyai titik asal. Letakkan nilai awal dalam @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);
  }
}

Peraturan permulaan terpakai pada kemas kini gaya pertama, bukan sebagai keadaan tertutup yang berterusan. Jika komponen dimasukkan semula, sama ada peralihan masuk berjalan bergantung pada kitaran hayat dan operasi DOM-nya; jangan anggap setiap togol atribut menggunakan peraturan permulaan.

Langkah 3: Kendalikan sifat diskret dan peralihan keluar

display tidak boleh diinterpolasi seperti kelegapan. Pastikan elemen kekal boleh dilukis semasa peralihan dan tukarkannya kepada keadaan tidak tersedia pada titik diskret; pelayar yang disokong boleh menggunakan transition-behavior: allow-discrete, dengan sandaran segera di tempat lain. Kekalkan nod yang sedang ditutup sehingga peralihan selesai atau biarkan komponen natif memiliki kitaran hayatnya; jangan meneka dengan setTimeout yang tetap. Tapis transitionend mengikut sifat dan kendalikan pembatalan, pembukaan berulang, dan penyahlekapan (unmount).

Langkah 4: Ambil kira top layer dan interaksi

Dialog dan popover dalam top layer mengubah susunan, latar belakang (backdrop), dan tingkah laku fokus. Tentukan peralihan kandungan dan ::backdrop secara berasingan, kemudian uji klik luar, Escape, penguncian tatal, dan berbilang tika (instances). Skrip harus mengekalkan panggilan API, pembatalan, dan panggilan balik perniagaan; @starting-style bukan pengganti untuk mesin keadaan JavaScript.

Langkah 5: Hormati keutamaan pergerakan dan sahkan

Di bawah @media (prefers-reduced-motion: reduce), alih keluar pergerakan, pendekkan tempoh, atau lumpuhkan peralihan sambil mengekalkan maklum balas keadaan. Uji pembukaan kali pertama, pembukaan semula, togol pantas, navigasi semasa penutupan, kegagalan skrip, pelayar lama, papan kekunci, pembaca skrin, latar belakang, dan pengembalian fokus. Jejak pembatalan, peralihan yang terganggu, baki nod tersembunyi, dan regresi kebolehcapaian dan bukannya memeriksa tangkapan skrin sahaja.

6. Contoh jawapan

Saya akan bermula dengan semantik: API dialog atau popover natif bersama sedikit skrip memiliki keadaan terbuka, fokus, dan Escape; CSS hanya mempersembahkan keadaan tersebut. Peralihan normal tidak mempunyai gaya lama pada kemas kini pertama, jadi @starting-style membekalkan titik asal kelegapan dan transformasi. display adalah diskret, jadi gunakan tingkah laku peralihan diskret yang disokong atau beralih serta-merta dalam pelayar lama. Kekalkan nod yang ditutup sehingga peralihan tamat daripada meneka dengan pemasa. Tentukan kandungan top-layer dan backdrop secara berasingan, kemudian uji pergerakan berkurangan, togol pantas, papan kekunci, dan pembaca skrin.

7. Kesilapan biasa

• Memperlakukan peraturan permulaan sebagai keadaan tertutup: Togol kemudian akan mempunyai keadaan yang salah; asingkan nilai berterusan, masuk, dan keadaan tertutup akhir.
• Menerapkan peralihan kelegapan biasa pada display: Elemen hilang terlalu awal atau kekal interaktif; gunakan tingkah laku diskret dan sandaran.
• Mengalih keluar nod dengan setTimeout: Tetapan pengguna, pembatalan, atau bingkai yang tercicir menyahsegerakkan kitaran hayat; gunakan peristiwa peralihan yang sah atau kitaran hayat natif.
• Membiarkan animasi mengawal fokus dan semantik: Teknologi bantuan mengikut pemasaan visual; wujudkan keadaan HTML/API terlebih dahulu.
• Mengabaikan pergerakan yang dikurangkan: Keutamaan pengguna dilanggar; pendekkan atau alih keluar pergerakan sambil mengekalkan maklum balas keadaan yang jelas.

8. Soalan susulan dan jawapan

Soalan susulan 1: Mengapakah peralihan biasa tidak mencukupi untuk fade-in pertama?

Sebelum kemas kini gaya pertama, mungkin tiada gaya pengiraan sebelumnya untuk dibandingkan, jadi pelayar menggunakan nilai akhir secara terus. @starting-style membekalkan titik asal tersebut; ia tidak mentakrifkan setiap keadaan penutupan yang seterusnya.

Soalan susulan 2: Bagaimanakah display boleh mengambil bahagian dalam peralihan keluar?

Pastikan elemen boleh dilukis semasa peralihan dan tukar display pada titik diskret. Gunakan allow-discrete di tempat yang disokong dan tutup serta-merta di tempat lain, sambil memastikan elemen yang ditutup tidak boleh menerima fokus atau interaksi penuding.

Soalan susulan 3: Apakah yang berlaku semasa perubahan pantas buka-tutup-buka?

Keadaan boleh berbalik sebelum peralihan sebelumnya selesai. Batalkan kerja animasi yang basi, baca keadaan semasa, dan biarkan keadaan terbaharu menjadi satu-satunya komit; jangan jalankan dua pemasa yang mengalih keluar dan membuka semula nod secara bebas. Uji klik berselang-seli, Escape, dan penamatan navigasi.