Что это самый чистый способ, чтобы временно отключить эффекты перехода в CSS?

Короткий Ответ:

используйте этот 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

... или эквивалентный JavaScript с использованием необработанных функций DOM или любой другой структуры, с которой вы работаете.

объяснение

это на самом деле довольно тонкая проблема.

во-первых, вы вероятно, вы хотите создать класс "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" в тайм-аут 1ms, например:

// 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 может быть достаточно медленным, что функция timeout ожидает выполнения к тому времени, когда браузер простаивает, и в противном случае будет думать о выполнении оппортунистического перепрофилирования, и если этот сценарий произойдет, 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/