Tidak ada gerakan ' t selalu lebih suka-dikurangkan-gerakan

Ramai pemaju menggunakan coretan CSS yang biasa apabila menangani pertanyaan media prefers-reduced-motion . Coretan ini bertujuan untuk menghapuskan semua gerakan di laman web jika pengguna telah membolehkan pengaturan gerakan dikurangkan dalam sistem operasi mereka. Walau bagaimanapun, pendekatan ini tidak selalu sesuai.

 @media (lebih suka-dikurangkan-gerakan: mengurangkan) {
  * {
    Animasi-Peringkat: 0.01ms! Penting;
    Animasi-Iterasi-kiraan: 1! Penting;
    Peralihan Peralihan: 0.01ms! Penting;
    tatal-tingkah laku: Auto! Penting;
  }
}

Kepentingan prefers-reduced-motion

Penetapan prefers-reduced-motion menangani kebimbangan akses yang berkaitan dengan gerakan pada skrin. Bagi individu yang mempunyai gangguan vestibular, migrain, atau pencetus penyitaan, animasi yang berlebihan boleh melemahkan. Seperti yang dinyatakan oleh Eric Bailey, pelayaran web boleh menjadi medan lombong animasi yang tidak dijangka.

Kehalusan terhadap penindasan

Walaupun keinginan untuk menghapuskan sepenuhnya semua animasi adalah kuat, ini sering tidak produktif. Animasi dapat meningkatkan kebolehcapaian, sebagai contoh, dengan menjelaskan interaksi kompleks atau hubungan antara unsur -unsur. Sepenuhnya melumpuhkan animasi menghilangkan aspek -aspek yang bermanfaat ini. Pendekatan yang lebih baik adalah lebih baik; Mengurangkan, melambatkan, atau mengubah suai animasi daripada menghapuskannya sepenuhnya.

Ben Nadel menunjukkan kaedah unggul, menggunakan pelbagai @keyframes untuk menawarkan animasi penuh dan versi gerakan yang dikurangkan. Modal, misalnya, mungkin menggunakan kedua-dua pudar dan skala secara lalai, tetapi hanya pudar apabila prefers-reduced-motion aktif.

 / * Lalai: Animasi gerakan yang dikurangkan */
@KeyFrames Modal-Enter {
  dari {opacity: 0; }
  kepada {opacity: 1; }
}

/ * Mengatasi No-Preeference: Animasi Penuh */
@media (lebih suka-dikurangkan-gerakan: tidak ada pilihan) {
  @KeyFrames Modal-Enter {
    dari {opacity: 0; Transform: Skala (0.7); }
    kepada {opacity: 1; Transform: Skala (1.0); }
  }
}

Pendekatan ini mengutamakan penyelesaian gerakan yang bijak dan berkurangan atas larangan selimut pada semua pergerakan.

Beyond CSS: Animasi JavaScript

Coretan CSS awal hanya berkesan menguruskan animasi yang didorong oleh CSS. Animasi JavaScript mungkin berkelakuan tidak dapat diramalkan, berpotensi membawa kepada akibat yang tidak diingini, seperti animasi yang sangat cepat dan membingungkan, seperti yang diperhatikan oleh Josh Comeau. Oleh itu, strategi yang komprehensif mesti mempertimbangkan animasi CSS dan JavaScript.

Atas ialah kandungan terperinci Tidak ada gerakan ' t selalu lebih suka-dikurangkan-gerakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!