Temuduga Frontend: Bagaimanakah anda menggunakan transition-behavior untuk keadaan UI diskret?

1. Gesaan dan konteks

Sebuah dialog disembunyikan dengan display: none. Pasukan produk mahu ia memudar masuk dan keluar (fade in and out), dan hanya meninggalkan susun atur selepas animasi selesai. Pasukan hanya melakukan transisi pada opacity, menyebabkan kemasukan tiada animasi yang kelihatan dan penutupan pula hilang serta-merta. Terangkan sifat diskret, reka bentuk CSS, dan rangkumi sandaran (fallback) pelayar, pengurusan fokus, serta prefers-reduced-motion.

2. Perkara yang diuji oleh penemuduga

Sama ada anda mengetahui bahawa sifat diskret seperti display dan content-visibility tidak mempunyai nilai perantaraan yang berterusan.
Sama ada anda boleh menggunakan transition-behavior: allow-discrete atau trengkas (shorthand) dengan betul dan bukannya menganggapnya sebagai tempoh masa (duration).
Sama ada anda memahami bahawa pemasaan pertukaran (flip timing) berbeza bagi kemasukan dan penutupan, dan bahawa @starting-style menetapkan gaya awal.
Sama ada anda merangkumi keserasian, kebolehcapaian, fokus, pengurangan pergerakan (reduced motion), dan ujian pemaparan sebenar.

3. Soalan penjelasan sebelum menjawab

Adakah ini elemen biasa, dialog natif, atau popover lapisan atas (top-layer)?
Adakah ia mesti meninggalkan susun atur dan tidak boleh difokuskan, atau memadai dengan melangkau proses lukis (paint)?
Versi pelayar manakah yang disokong, dan apakah sandaran tanpa transisi diskret?
Bagaimanakah fokus, kekunci Escape, klik latar belakang (backdrop), dan keutamaan reduced-motion harus bertindak semasa animasi?

4. Rangka jawapan 30 saat

display adalah diskret, jadi ia tidak melakukan interpolasi secara lalai. Gunakan transition-behavior: allow-discrete untuk membolehkannya menyertai transisi dan sediakan juga tempoh masa bukan sifar untuk opacity atau transform. Semasa kemasukan, tukar kepada nilai yang kelihatan cukup awal untuk keseluruhan animasi; semasa penutupan, kekalkan elemen kelihatan sehingga tamat. Gunakan @starting-style untuk bingkai pertama yang disisipkan. Pelayar lama boleh mengabaikan peningkatan ini sambil mengekalkan sandaran berterusan; fokus, semantik tersembunyi, dan pergerakan yang dikurangkan masih memerlukan pengendalian yang jelas.

5. Jawapan mendalam langkah demi langkah

Langkah 1: Asingkan sifat berterusan dan diskret

opacity dan transform boleh menghasilkan nilai perantaraan yang berterusan; display hanya menukar nilai. Tanpa allow-discrete, pelayar menukar display serta-merta, jadi elemen yang ditutup disingkirkan sebelum transisi kelegapannya dapat dilihat dan elemen yang dibuka tidak mempunyai bingkai mula yang kelihatan. transition-behavior hanya membenarkan transisi diskret; transition-property dan transition-duration bukan sifar masih diperlukan.

Langkah 2: Bina transisi panel dua hala

Isytiharkan sandaran berterusan terlebih dahulu, kemudian perisytiharan dipertingkat dengan allow-discrete. Semasa penutupan, display harus bertukar hampir 100% supaya kandungan kekal kelihatan; semasa kemasukan, ia harus bertukar kepada nilai kelihatan pada peringkat awal. Jangan hanya mengisytiharkan transition-behavior dan terlupa keadaan kelegapan sasaran atau penjelmaan (transform).

css

.panel {
  opacity: 0;
  transform: translateY(-0.5rem);
  display: none;
  transition: opacity 180ms ease, transform 180ms ease;
  transition: opacity 180ms ease, transform 180ms ease, display 180ms allow-discrete;
}

.panel[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  display: block;
}

Langkah 3: Kendalikan kemasukan pertama dan popover

Apabila sesuatu elemen disisipkan secara dinamik atau popover dibuka buat kali pertama, mungkin tiada gaya kelihatan sebelumnya untuk dibandingkan. @starting-style membekalkan kelegapan dan penjelmaan awal. Popover natif juga memasuki lapisan atas, jadi display dan overlay perlu disertakan dalam transisi diskret atau elemen yang keluar akan disingkirkan serta-merta. Uji gabungan ini pada versi pelayar sasaran.

Langkah 4: Reka bentuk sandaran dan pengesanan ciri

Pelayar lama mengabaikan nilai allow-discrete yang tidak diketahui tetapi masih perlu mengekalkan transisi asas kelegapan/penjelmaan. Letakkan peraturan peningkatan di sebalik @supports (transition-behavior: allow-discrete) jika perlu, dan bukannya menyembunyikan keseluruhan gaya asas. Sandaran mesti masih boleh membuka, menutup, menerima fokus, dan mendedahkan semantik tersembunyi yang betul.

Langkah 5: Kebolehcapaian, prestasi, dan pengesahan

Animasi bukanlah keadaan kebolehcapaian. Apabila ditutup, selaraskan hidden, aria-hidden, atau keadaan dialog natif dan kembalikan fokus kepada pencetus; apabila dibuka, alihkan fokus ke dalam dan sokong kekunci Escape. Kurangkan atau alih keluar tempoh masa di bawah prefers-reduced-motion: reduce. Uji susun atur, lukisan (paint), fokus papan kekunci, pembaca skrin, pertukaran pantas, transisi yang terganggu, dan kos susun atur/penggubahan pada peranti berspesifikasi rendah.

6. Contoh jawapan berkualiti tinggi

display adalah diskret dan tidak mempunyai nilai perantaraan berterusan seperti kelegapan. Saya akan mengekalkan transisi asas kelegapan/penjelmaan, kemudian mendayakan display ke dalam laluan yang dipertingkat dengan transition-behavior: allow-discrete; kemasukan bertukar kepada kelihatan pada peringkat awal, manakala penutupan kekal kelihatan sehingga akhir. @starting-style membekalkan bingkai pertama, dan popover juga memerlukan pengendalian display dan overlay lapisan atas. Pelayar lama mengabaikan peningkatan tersebut tetapi mengekalkan animasi asas. Saya juga akan menyelaraskan fokus, kekunci Escape, semantik tersembunyi, dan pergerakan yang dikurangkan, kemudian mengesahkan tingkah laku tersebut merentasi pelayar dan aliran papan kekunci.

7. Kesilapan lazim

Hanya melakukan transisi pada kelegapan → display berubah serta-merta → tambah allow-discrete sambil mengekalkan sifat berterusan.
Menganggap transition-behavior sebagai tempoh masa → sifat diskret masih tidak bertransisi → isytiharkan sifat tersebut dan juga tempoh masa bukan sifar.
Menukar display kepada none pada permulaan penutupan → pemudaran tidak dapat dilihat → selaraskan pertukaran diskret dengan penghujung tempoh penutupan.
Mengabaikan sisipan pertama → pembukaan kali pertama tidak mempunyai animasi kemasukan → tentukan bingkai awal dengan @starting-style.
Hanya menguji dengan tetikus dan pelayar moden → papan kekunci, pembaca skrin, atau keadaan sandaran gagal → sertakan semakan sandaran supports, fokus, dan reduced-motion.

8. Soalan susulan dan respons

Mengapakah display perlu bertukar pada penghujung penutupan?

Jika ia bertukar kepada none serta-merta, elemen tersebut meninggalkan susun atur dan pemaparan, jadi tiada kandungan yang kelihatan untuk baki tempoh kelegapan. Kekalkannya kelihatan sehingga hampir 100%, kemudian masuki keadaan tersembunyi.

Adakah allow-discrete menginterpolasi display pada setiap bingkai?

Tidak. Ia membenarkan nilai diskret mengambil bahagian dalam transisi, tetapi nilainya tetap bertukar pada titik yang telah ditentukan. Perubahan visual yang berterusan datang daripada kelegapan, penjelmaan, atau sifat lain yang boleh diinterpolasi.

Bagaimanakah anda mengekalkan kebolehgunaan pada pelayar lama?

Isytiharkan transisi asas tanpa allow-discrete terlebih dahulu, kemudian tingkatkan dengan @supports atau perisytiharan yang terkemudian. Jika peningkatan tidak tersedia, terima pertukaran display serta-merta sambil mengekalkan tingkah laku butang, fokus, dan semantik tersembunyi.

Bagaimanakah anda mengendalikan pengurangan pergerakan (reduced motion)?

Di bawah prefers-reduced-motion: reduce, pendekkan tempoh masa secara ketara atau tetapkannya kepada sifar sambil mengekalkan penyelarasan keadaan, pergerakan fokus, dan kawalan penutupan. Jangan hanya menyembunyikan animasi dan membiarkan elemen boleh fokus yang tidak kelihatan.