CSS Transition Animation Shake: Mengapa Elemen Saya Goncang Apabila Animasi, Bagaimana Menyelesaikannya?

Jitter Animasi Peralihan CSS: Cleverly menyelesaikan masalah Animasi Lag

Apabila menggunakan atribut transition CSS untuk membuat kesan animasi, anda sering menghadapi jitter animasi yang menjengkelkan. Sebagai contoh, anda mahu elemen bergerak ke atas apabila tetikus melayang dan mencapai peralihan yang lancar melalui transition :

 margin-bottom: 64px;
Peralihan: margin-bawah 0.3s mudah;
Will-change: margin-bottom;

Walau bagaimanapun, kesan sebenar boleh menyebabkan unsur -unsur goncang berulang kali di sempadan animasi. Ini kerana menggunakan margin-bottom dengan transition , perbezaan halus dalam penyemak imbas boleh menyebabkan animasi gagap apabila mengira susun atur.

Bagaimana untuk mengelakkan jitter animasi?

Penyelesaian yang berkesan adalah dengan menggunakan atribut transform dan bukannya margin-bottom untuk mencapai anjakan elemen. Atribut transform tidak mencetuskan susun atur pelepasan dan redrawing, dengan itu berkesan mengelakkan jitter.

Kod berikut menggunakan transform Property untuk melaksanakan animasi pergerakan ke atas yang sama:

 Transform: Translatey (-20px); /* Gunakan terjemahan untuk menjadi lebih jelas*/
Peralihan: Transformasi 0.3s mudah;

Dengan menggerakkan elemen secara menegak sehingga 20 piksel dan menggunakan transition untuk mengawal kesan peralihan transform , anda boleh mencapai animasi yang lancar dan menyelesaikan masalah jitter yang disebabkan oleh margin-bottom . Ciri atribut transform ini menjadikannya pilihan terbaik untuk menangani masalah animasi seperti itu.

Atas ialah kandungan terperinci CSS Transition Animation Shake: Mengapa Elemen Saya Goncang Apabila Animasi, Bagaimana Menyelesaikannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!