Bagaimana untuk Melumpuhkan Peralihan CSS Sementara Semasa Manipulasi DOM?

Cara Melumpuhkan Sementara Kesan Peralihan CSS

Apabila bekerja dengan elemen DOM yang menggunakan peralihan CSS, mungkin terdapat situasi di mana anda perlu lumpuhkan sementara kesan ini untuk mengubah saiz yang lancar. Artikel ini meneroka penyelesaian yang paling elegan untuk mencapai perkara ini.

Melumpuhkan Peralihan

Untuk melumpuhkan peralihan CSS dengan berkesan, anda boleh membuat kelas "notransition" seperti ini:

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

Melaksanakan dengan JavaScript

Terdapat dua cara untuk menggunakan kelas "notransition" dengan 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

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

Masalah melumpuhkan peralihan ialah penyemak imbas menampan perubahan gaya sehingga pelaksanaan JavaScript selesai dan menerapkannya dalam satu "reflow ." Ini boleh mengakibatkan animasi yang tidak diingini. Untuk memaksa aliran semula dan mengepam perubahan CSS, anda perlu membaca sifat offsetHeight elemen.

Nota Tambahan

• Pastikan '!penting' mempunyai cukup berat untuk mengatasi gaya sedia ada.
• Pertimbangkan sifat awalan vendor untuk penyemak imbas keserasian.
• Penyelesaian ini sesuai untuk penyemak imbas yang menyokong peralihan tetapi ingat bahawa tidak semua penyemak imbas melakukannya.

Atas ialah kandungan terperinci Bagaimana untuk Melumpuhkan Peralihan CSS Sementara Semasa Manipulasi DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!