Bagaimanakah Saya Boleh Melumpuhkan dan Mendayakan Semula Peralihan CSS dengan Cekap dalam JavaScript?

Melumpuhkan dan Mendayakan Semula Peralihan CSS

Dalam aplikasi web biasa, elemen DOM boleh tertakluk kepada pelbagai peralihan CSS. Walau bagaimanapun, mungkin terdapat keadaan di mana anda perlu melumpuhkan sementara kesan ini semasa operasi tertentu, seperti mengubah saiz elemen.

Hilang Upaya Elegan dan Mendayakan Semula

Untuk elegan lumpuhkan dan dayakan semula peralihan CSS, anda boleh menggunakan gabungan CSS dan JavaScript.

CSS Kelas:

Buat kelas CSS "notransition" untuk mengatasi sifat peralihan elemen:

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

JavaScript:

Tanpa jQuery:

const someElement = document.getElementById("some-element");

// Disable transitions
someElement.classList.add('notransition');

// Perform CSS changes
doWhateverCssChangesYouWant(someElement);

// Trigger a reflow
someElement.offsetHeight;

// Re-enable transitions
someElement.classList.remove('notransition');

Dengan jQuery:

const $someElement = $('#some-element');

// Disable transitions
$someElement.addClass('notransition');

// Perform CSS changes
doWhateverCssChangesYouWant($someElement);

// Trigger a reflow
$someElement[0].offsetHeight;

// Re-enable transitions
$someElement.removeClass('notransition');

Penjelasan:

1. Tambah kelas "notransition" untuk melumpuhkan peralihan.
2. Gunakan mana-mana perubahan CSS yang diingini kepada elemen.
3. Cetuskan aliran semula paksa dengan membaca sifat offsetHeight elemen.
4. Alih keluar kelas "notransition" untuk mendayakan semula peralihan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melumpuhkan dan Mendayakan Semula Peralihan CSS dengan Cekap dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!