Bagaimanakah Saya Boleh Melumpuhkan Kesan Peralihan CSS buat sementara waktu untuk Saiz Semula Elemen Lancar?

Melumpuhkan Kesan Transisi CSS Buat Sementara itu

Dalam pembangunan web, selalunya perlu untuk melumpuhkan kesan peralihan CSS apabila membuat perubahan pada elemen untuk memastikan saiz semula atau pelarasan penampilan yang lancar. Berikut ialah penyelesaian yang paling elegan:

Penyelesaian

Buat Kelas CSS:

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

Gunakan JavaScript (tanpa jQuery):

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

Gunakan JavaScript dengan jQuery:

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

Penjelasan:

Penyelesaian ini menggunakan kelas CSS untuk mengatasi sebarang tetapan peralihan sedia ada dengan !important. Ia kemudian menambahkan kelas pada elemen, membuat perubahan CSS yang diingini, memaksa aliran semula menggunakan offsetHeight, dan akhirnya mengalih keluar kelas untuk mendayakan semula peralihan.

Pertimbangan

• Pastikan bahawa .notransition mengatasi peraturan sedia ada (pertimbangkan untuk menggunakan !important dalam CSS).
• Paksa aliran semula selepas melumpuhkan peralihan dengan membaca offsetHeight atau menggunakan kaedah lain yang sesuai.
• Penyelesaian ini berfungsi merentas pelayar dan merupakan kaedah paling elegan untuk melumpuhkan kesan peralihan CSS buat sementara waktu.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melumpuhkan Kesan Peralihan CSS buat sementara waktu untuk Saiz Semula Elemen Lancar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!