Який найчистіший спосіб тимчасово відключити ефекти переходу CSS?

У мене є елемент DOM із застосованими деякими / всіма наступними ефектами:

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

Я пишу плагін jQuery, який змінює розмір цього елемента, мені потрібно тимчасово відключити ці ефекти, щоб я міг змінити його розмір.

Який найелегантніший спосіб тимчасового відключення цих ефектів (а потім їх повторне включення), якщо вони можуть застосовуватися від батьків або взагалі не застосовуватися.

Коротка відповідь

Використовуйте цей CSS:

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

Плюс або цей JS (без 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

Або цей JS з jQuery ...

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

... або еквівалентний код, використовуючи будь-яку іншу бібліотеку чи рамки, з якими ви працюєте.

Пояснення

Це насправді досить тонка проблема.

По-перше, ви, ймовірно, хочете створити клас "notransition", до якого ви можете застосувати елементи, щоб встановити їх *-transitionатрибути CSS none. Наприклад:

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

_{(Невелика сторона - зверніть увагу на відсутність -ms-transitionтам. Вам це не потрібно. Першою версією Internet Explorer, яка взагалі підтримувала переходи, був IE 10, який підтримував їх нефіксовано.)}

Але це просто стиль, і це легкий біт. Коли ви приїдете спробувати цей клас, ви потрапите в пастку. Пастка полягає в тому, що подібний код не працюватиме так, як ви наївно очікуєте:

// 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')

Наївно, ви можете подумати, що зміна висоти не буде оживляти, оскільки це відбувається під час застосування класу "notransition". Насправді ж вона буде анімована, принаймні, у всіх сучасних браузерах, які я пробував. Проблема полягає в тому, що браузер кешує зміни стилів, які йому потрібно внести, поки JavaScript не закінчить виконання, а потім внесе всі зміни за один перезапуск. Як результат, він робить відтік, коли немає жодної зміни в тому, включені чи ні переходи, але є чиста зміна висоти. Отже, він оживляє зміну висоти.

Ви можете подумати, що розумним і чистим способом подолати це було б обернути видалення класу "notransition" на час очікування за 1 мс, як це:

// 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);

але це також не працює надійно. Мені не вдалося зробити розрив вищезгаданого коду в браузерах WebKit, але на Firefox (на повільних і швидких машинах) іноді (здавалося б, навмання) ви отримаєте таку саму поведінку, як і за допомогою наївного підходу. Я гадаю, що причина цього полягає в тому, що виконання JavaScript може бути досить повільним, щоб функція тайм-ауту очікувала виконання до того часу, коли браузер не працює, і в іншому випадку буде думати про те, щоб зробити умовно-патологічне оновлення, і якщо такий сценарій відбудеться, Firefox виконує функцію черги перед відновкою.

Єдине рішення, яке я знайшов у цій проблемі - змусити перезавантажити елемент, промивши внесені до нього зміни CSS, перш ніж видаляти клас "notransition". Існують різні способи зробити це - дивіться тут для деяких. Найбільш близьким до "стандартного" способу цього є зчитування offsetHeightвластивості елемента.

Одне рішення, яке насправді працює, це

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

Ось загадка JS, яка ілюструє три можливі підходи, які я описав тут (як один успішний підхід, так і два невдалі): http://jsfiddle.net/2uVAA/131/

Я б закликав вимкнути анімацію, як запропонував DaneSoul, але зробити перемикання глобальним:

/*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; 
} 

.notransitionпотім можна застосувати до bodyелемента, фактично перекривши будь-яку анімацію переходу на сторінці:

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

Додайте додатковий клас CSS, який блокує перехід, а потім видаліть його, щоб повернутися до попереднього стану. Це робить і CSS, і код JQuery коротким, простим і добре зрозумілим.

CSS :

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

!important було додано, щоб бути впевненим, що це правило матиме більше "ваги", оскільки ідентифікатор зазвичай більш специфічний, ніж клас.

JQuery :

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

Для чистого розчину JS (без CSS класів), просто встановіть transitionв 'none'. Щоб відновити перехід, як зазначено в CSS, встановіть transitionпорожній рядок.

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

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

Якщо ви використовуєте префікси постачальника, вам також потрібно буде встановити їх.

elem.style.webkitTransition = 'none'

За допомогою цього коду css можна відключити анімацію, перехід, trasform для всіх елементів сторінки

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);

Я думаю, ви могли б створити окремий клас css, який ви можете використовувати в цих випадках:

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

Тоді в jQuery ви будете перемикати клас так:

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

Якщо ви хочете просте рішення без jquery для запобігання всіх переходів:

1. Додайте цей CSS:

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

2. А потім у вашому js:

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)

Якщо ви хочете видалити CSS переходи, перетворення та анімації з поточної веб-сторінки, ви можете просто виконати цей маленький сценарій, який я написав (всередині консолі браузера):

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);

Він використовує vanillaJS для завантаження цього css-файлу . Тут також є github repo, якщо ви хочете використовувати це в контексті скрепера (Ruby-Selenium): delete-CSS-animations-repo

робить

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

у твоєму js його вб'єш?

очевидно повторити для кожного.

Я мав би такий клас у вашому CSS:

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

а потім у вашому jQuery:

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