Bagaimanakah Saya Boleh Melumpuhkan Peralihan CSS dengan Amanah dalam JavaScript?

Mengatasi Cabaran Peralihan CSS

Dalam bidang pembangunan web, melumpuhkan kesan peralihan CSS buat sementara waktu boleh menimbulkan cabaran. Walaupun nampaknya mudah untuk hanya menogol kelas CSS, pendekatan ini sering gagal disebabkan oleh pengoptimuman penyemak imbas.

Penyelesaian: Kelas Tanpa Peralihan dan Aliran Semula Paksa

Untuk melumpuhkan peralihan dengan berkesan, kelas CSS boleh digunakan untuk menetapkan semua sifat peralihan kepada tiada menggunakan bendera !important. Walau bagaimanapun, kelas iniだけでは、期待した動作は得られません。

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

Helahnya terletak pada memaksa aliran semula elemen selepas mengubah suai sifat CSSnya. Muat semula ini mengepam perubahan CSS yang belum selesai, memastikan peralihan dilumpuhkan. Satu kaedah yang boleh dipercayai ialah dengan mengakses sifat offsetHeight bagi elemen.

Pelaksanaan 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

Kaveat

Pastikan bahawa !important mencukupi untuk mengatasi gaya sedia ada. Jika tidak, pertimbangkan untuk menggunakan element.style.setProperty untuk melumpuhkan dan mendayakan semula peralihan secara manual. Awalan vendor mungkin ditinggalkan, kerana kebanyakan penyemak imbas moden menyokong peralihan tanpanya.

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