Adakah 'peralihan: semua' Memperlahankan Peralihan CSS3?

Adakah "Peralihan: Semua" Menghalang Kelajuan Peralihan CSS3?

Menggunakan peralihan CSS3 menawarkan kesan animasi kepada elemen web. Amalan biasa ialah menggunakan "peralihan: semua" untuk menyasarkan semua peralihan secara seragam untuk berbilang elemen. Walau bagaimanapun, terdapat perdebatan mengenai sama ada pendekatan ini menjejaskan prestasi pemaparan.

Pertanyaan: Bolehkah menyasarkan sifat peralihan khusus untuk setiap elemen (cth., "peralihan: kelegapan .2s kemudahan masuk") menghasilkan animasi yang lebih pantas dan lancar berbanding menggunakan "transition: semua"?

Penjelasan: Adakah carian enjin CSS untuk sifat peralihan "semua", walaupun untuk elemen dengan satu sifat, berpotensi memperlahankan pemaparan?

Jawapan:

Ya, menggunakan "peralihan: semua" boleh mempunyai kelemahan prestasi yang ketara. Penyemak imbas mungkin melakukan semakan peralihan yang tidak perlu, walaupun apabila sifat tertentu kekal tidak berubah atau tidak kelihatan kepada pengguna (cth., perubahan warna atau dimensi).

Demonstrasi:

Dabblet ini menunjukkan isu: http://dabblet.com/gist/1657661. Menukar tahap zum atau saiz fon mencetuskan animasi pada semua elemen, tidak kira sama ada peralihan yang kelihatan diperlukan.

Cadangan:

Untuk mengoptimumkan prestasi, elakkan menggunakan "peralihan : semua" dan pilih peralihan yang disasarkan (cth., "peralihan: margin .2s kemudahan masuk"). Ini mengehadkan semakan yang tidak perlu dan mengurangkan risiko animasi yang tidak diingini.

Pertimbangan Tambahan:

"Peralihan: semua" juga boleh menyebabkan kesan yang tidak diingini seperti animasi "percikan" pada beban halaman, di mana gaya awal diberikan sebelum kesan peralihan digunakan. Peralihan yang disasarkan membantu mengurangkan isu ini.

Atas ialah kandungan terperinci Adakah 'peralihan: semua' Memperlahankan Peralihan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!