Apa cara paling bersih untuk menonaktifkan efek transisi CSS sementara?

Saya memiliki elemen DOM dengan beberapa / semua efek berikut diterapkan:

#elem {
  -webkit-transition: height 0.4s ease;
  -moz-transition: height 0.4s ease;
  -o-transition: height 0.4s ease;
  transition: height 0.4s ease;
}

Saya menulis plugin jQuery yang mengubah ukuran elemen ini, saya harus menonaktifkan efek ini sementara sehingga saya dapat mengubah ukurannya dengan lancar.

Apa cara paling elegan untuk menonaktifkan efek ini sementara (dan kemudian mengaktifkannya kembali), mengingat mereka dapat diterapkan dari orang tua atau mungkin tidak diterapkan sama sekali.

Jawaban singkat

Gunakan CSS ini:

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

Ditambah JS ini (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

Atau JS ini 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

... atau kode yang setara menggunakan pustaka atau kerangka kerja apa pun yang Anda gunakan.

Penjelasan

Ini sebenarnya masalah yang cukup halus.

Pertama, Anda mungkin ingin membuat kelas 'notransition' yang dapat Anda terapkan ke elemen untuk mengatur *-transitionatribut CSS mereka none. Misalnya:

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

_{(Samping kecil - perhatikan kurangnya -ms-transitiondi sana. Anda tidak memerlukannya. Versi pertama dari Internet Explorer yang mendukung transisi sama sekali adalah IE 10, yang mendukungnya tidak diperbaiki.)}

Tapi itu hanya gaya, dan sedikit mudah. Ketika Anda datang untuk mencoba dan menggunakan kelas ini, Anda akan menjebak. Perangkapnya adalah bahwa kode seperti ini tidak akan berfungsi seperti yang Anda harapkan secara naif:

// Don't do things this way! It doesn't work!
someElement.classList.add('notransition')
someElement.style.height = '50px' // just an example; could be any CSS change
someElement.classList.remove('notransition')

Secara naif, Anda mungkin berpikir bahwa perubahan ketinggian tidak akan dianimasikan, karena itu terjadi ketika kelas 'notransition' diterapkan. Pada kenyataannya, ini akan dianimasikan, setidaknya di semua browser modern yang saya coba. Masalahnya adalah bahwa browser sedang melakukan caching perubahan styling yang perlu dibuat sampai JavaScript selesai dieksekusi, dan kemudian membuat semua perubahan dalam satu reflow tunggal. Akibatnya, ia melakukan reflow di mana tidak ada perubahan bersih pada apakah transisi diaktifkan atau tidak, tetapi ada perubahan bersih pada ketinggian. Akibatnya, itu menghidupkan perubahan tinggi.

Anda mungkin berpikir cara yang masuk akal dan bersih untuk menyiasatinya adalah dengan membungkus penghapusan kelas 'notransisi' dalam waktu habis 1 ms, seperti ini:

// Don't do things this way! It STILL doesn't work!
someElement.classList.add('notransition')
someElement.style.height = '50px' // just an example; could be any CSS change
setTimeout(function () {someElement.classList.remove('notransition')}, 1);

tapi ini tidak bisa diandalkan. Saya tidak dapat membuat kode di atas di browser WebKit, tetapi pada Firefox (pada mesin lambat dan cepat) Anda kadang-kadang (tampaknya secara acak) mendapatkan perilaku yang sama dengan menggunakan pendekatan naif. Saya kira alasan untuk ini adalah bahwa eksekusi JavaScript mungkin cukup lambat sehingga fungsi timeout menunggu untuk dieksekusi pada saat browser idle dan sebaliknya berpikir untuk melakukan reflow oportunistik, dan jika skenario itu terjadi, Firefox menjalankan fungsi antrian sebelum reflow.

Satu-satunya solusi yang saya temukan untuk masalah ini adalah memaksa reflow elemen, membersihkan perubahan CSS yang dibuat untuk itu, sebelum menghapus kelas 'notransition'. Ada berbagai cara untuk melakukan ini - lihat di sini untuk beberapa. Hal yang paling dekat dengan cara 'standar' dalam melakukan ini adalah membaca offsetHeightproperti elemen.

Salah satu solusi yang benar-benar berfungsi adalah

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

Berikut ini biola JS yang menggambarkan tiga pendekatan yang mungkin saya jelaskan di sini (baik pendekatan yang berhasil maupun yang gagal): http://jsfiddle.net/2uVAA/131/

Saya akan menganjurkan penonaktifan animasi seperti yang disarankan oleh DaneSoul, tetapi membuat perubahan global:

/*kill the transitions on any descendant elements of .notransition*/
.notransition * { 
  -webkit-transition: none !important; 
  -moz-transition: none !important; 
  -o-transition: none !important; 
  -ms-transition: none !important; 
  transition: none !important; 
} 

.notransitionkemudian dapat diterapkan ke bodyelemen, secara efektif mengesampingkan setiap animasi transisi pada halaman:

$('body').toggleClass('notransition');

Tambahkan kelas CSS tambahan yang memblokir transisi, dan kemudian hapus untuk kembali ke keadaan sebelumnya. Ini membuat kode CSS dan JQuery pendek, sederhana dan mudah dipahami.

CSS :

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

!important ditambahkan untuk memastikan bahwa aturan ini akan memiliki lebih banyak "bobot", karena ID biasanya lebih spesifik daripada kelas.

JQuery :

$('#elem').addClass('notransition'); // to remove transition
$('#elem').removeClass('notransition'); // to return to previouse transition

Untuk solusi JS murni (tanpa kelas CSS), cukup atur transitionke 'none'. Untuk mengembalikan transisi seperti yang ditentukan dalam CSS, setel transitionke string kosong.

// Remove the transition
elem.style.transition = 'none';

// Restore the transition
elem.style.transition = '';

Jika Anda menggunakan awalan vendor, Anda harus mengaturnya juga.

elem.style.webkitTransition = 'none'

Anda dapat menonaktifkan animasi, transisi, trasforms untuk semua elemen di halaman dengan kode css ini

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '* {' +
'/*CSS transitions*/' +
' -o-transition-property: none !important;' +
' -moz-transition-property: none !important;' +
' -ms-transition-property: none !important;' +
' -webkit-transition-property: none !important;' +
'  transition-property: none !important;' +
'/*CSS transforms*/' +
'  -o-transform: none !important;' +
' -moz-transform: none !important;' +
'   -ms-transform: none !important;' +
'  -webkit-transform: none !important;' +
'   transform: none !important;' +
'  /*CSS animations*/' +
'   -webkit-animation: none !important;' +
'   -moz-animation: none !important;' +
'   -o-animation: none !important;' +
'   -ms-animation: none !important;' +
'   animation: none !important;}';
   document.getElementsByTagName('head')[0].appendChild(style);

Saya pikir Anda bisa membuat kelas css terpisah yang dapat Anda gunakan dalam kasus ini:

.disable-transition {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: color 0 ease-in;
  -ms-transition: none;
  transition: none;
}

Kemudian di jQuery Anda akan beralih kelas seperti:

$('#<your-element>').addClass('disable-transition');

Jika Anda ingin solusi tanpa jquery sederhana untuk mencegah semua transisi:

1. Tambahkan CSS ini:

body.no-transition * {
  transition: none !important;
}

2. Dan kemudian di js Anda:

document.body.classList.add("no-transition");

// do your work, and then either immediately remove the class:

document.body.classList.remove("no-transition");

// or, if browser rendering takes longer and you need to wait until a paint or two:

setTimeout(() => document.body.classList.remove("no-transition"), 1);

// (try changing 1 to a larger value if the transition is still applying)

Jika Anda ingin menghapus transisi, transformasi, dan animasi CSS dari halaman web saat ini, Anda bisa menjalankan skrip kecil yang saya tulis ini (di dalam konsol browser Anda):

let filePath = "https://dl.dropboxusercontent.com/s/ep1nzckmvgjq7jr/remove_transitions_from_page.css";
let html = `<link rel="stylesheet" type="text/css" href="${filePath}">`;
document.querySelector("html > head").insertAdjacentHTML("beforeend", html);

Ini menggunakan vanillaJS untuk memuat file css ini . Ini juga repo github jika Anda ingin menggunakan ini dalam konteks scraper (Ruby-Selenium): remove-CSS-animations-repo

tidak

$('#elem').css('-webkit-transition','none !important'); 

di js kamu membunuhnya?

jelas ulangi untuk masing-masing.

Saya memiliki kelas di CSS Anda seperti ini:

.no-transition { 
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}

dan kemudian di jQuery Anda:

$('#elem').addClass('no-transition'); //will disable it
$('#elem').removeClass('no-transition'); //will enable it