Bagaimanakah Saya Boleh Melumpuhkan Peralihan CSS Secara Elegan Semasa Saiz Semula Elemen DOM untuk Animasi Lancar?

Lumpuhan Elegan Kesan Peralihan CSS untuk Saiz Semula Lancar

Anda telah menghadapi situasi di mana melumpuhkan kesan peralihan CSS adalah penting untuk pensaizan semula yang lancar elemen DOM. Untuk menangani perkara ini, mari kita terokai penyelesaian yang elegan dan berkesan.

CSS untuk Melumpuhkan Peralihan:

Buat kelas '.notransition' untuk mengatasi peraturan peralihan sedia ada:

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

Javascript Pelaksanaan:

Menggunakan Javascript Biasa:

someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow
someElement.classList.remove('notransition'); // Re-enable transitions

Menggunakan jQuery:

$someElement.addClass('notransition'); // Disable transitions
doWhateverCssChangesYouWant($someElement);
$someElement[0].offsetHeight; // Trigger a reflow
$someElement.removeClass('notransition'); // Re-enable transitions

Penjelasan:

1. Gunakan kelas '.notransition': Kelas ini akan melumpuhkan peralihan kesan dengan mengatasi sifat peralihan CSS.
2. Lakukan CSS yang diingini perubahan: Tukar ketinggian atau sifat CSS lain mengikut keperluan dengan peralihan dilumpuhkan.
3. Cetus aliran semula: Baca sifat offsetHeight elemen untuk memaksa aliran semula dan siram perubahan CSS yang belum selesai.
4. Buat asal kelas: Setelah aliran semula dicetuskan, alih keluar Kelas '.notransition' untuk memulihkan peralihan.

Pendekatan ini memastikan peralihan CSS dilumpuhkan dengan anggun dan didayakan semula semasa proses mengubah saiz, membenarkan animasi yang lancar dan lancar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melumpuhkan Peralihan CSS Secara Elegan Semasa Saiz Semula Elemen DOM untuk Animasi Lancar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!