Отключение CSS-переходов для плавного изменения размеров DOM

Быстрый ответ

Если вам необходимо немедленно приостановить CSS-переходы для элемента, просто установите значение свойства transition в none через JavaScript. После внесения ваших изменений, верните переходы обратно. Вот соответствующий код:

const el = document.querySelector('.element'); // Выбираем интересующий нас элемент
const originalTransition = getComputedStyle(el).transition; // Запоминаем исходное состояние перехода
el.style.transition = 'none'; // Выключаем переход

// Здесь расположен ваш код для модификации элемента...

el.style.transition = originalTransition; // Возвращаем переход

Сперва измените transition на none, затем произведите модификации DOM, и после всего верните значение originalTransition. Вот и всё!

Управление переходами с помощью отдельного CSS-класса

Более удобный и надёжный способ — использовать CSS-класс .notransition, который будет отключать переходы:

.notransition {
  transition: none !important; // Переходы тут не проживут!
}

Когда появляется необходимость отключить переходы, просто примените этот класс:

el.classList.add('notransition'); // Применяем класс

el.offsetHeight; // Вызываем перерасчет браузером

el.classList.remove('notransition'); // Удаляем класс

Запрос к свойству offsetHeight заставляет браузер обновить DOM. А изменения произойдут мгновенно, без анимации.

Особенности использования переходов

Переходы в CSS могут наследоваться, подобно семейным обрядам. Используя класс .notransition, помните о его влиянии на все дочерние элементы или применяйте его к их предку.

Вот как можно приостановить все переходы на странице путем добавления .notransition к body:

document.body.classList.add('notransition'); // Останавливаем все переходы на странице
// Проведите любые изменения DOM...
document.body.offsetHeight; // Вызваем обновление DOM
document.body.classList.remove('notransition'); // Возвращаем всё в исходное состояние

Частные сценарии и решения

Управление плавными переходами при использовании jQuery

Если вы используете плагины jQuery для изменения размеров элементов, у вас есть возможность контролировать "шаткие" анимации следующим образом:

$('.resize-element').addClass('notransition'); // Отключаем переходы
$(window).resize();
$('.resize-element').get(0).offsetHeight;
$('.resize-element').removeClass('notransition'); // Возвращаем анимацию

Подробнее об этом расскажет наш спикер на видео

Мгновенное выключение переходов с динамическими стилями

Для того чтобы немедленно удалить все переходы, можно динамически добавить тег <style>:

const styleTag = document.createElement('style');
styleTag.innerHTML = '* { transition: none !important; }'; // Отключаем переходы на всех элементах
document.head.appendChild(styleTag);

// Производим необходимые действия...

document.head.removeChild(styleTag); // Удаляем добавленный стиль

Специфические сценарии для вашего фреймворка

Поклонники фреймворков, таких как Vue, React или Angular, могут использовать v-bind:class, className и [ngClass] для управления стилями и классами.

Визуализация

Представьте себе жд вокзал, где все поезда движутся. Приостановка CSS-переходов напоминает киносцену, где все вдруг замирают:

Вокзал 🚉: [🚄💨, 🚅💨, 🚈💨]

Как только мы приостанавливаем переходы:

station.pauseAllTrains(); // Останавливаем все поезда

На вокзале воцаряется тишина:

Вокзал 🚉: [🚄🛑, 🚅🛑, 🚈🛑]

А затем мы снова запускаем поезда в путь:

station.resumeAllTrains(); // И снова в путь

"Заморозка" переходов при помощи .notransition — это весьма аналогичный процесс.

Избегайте проблем со старыми браузерами

Необходимость в Reflow

Каждый браузер имеет свои особенности. offsetHeight заставит большинство из них пересчитать DOM, но лучше всего прочитайте документацию конкретного браузера для уверенности.

Осторожность при использовании !important

Держите в уме мощь !important и используйте это свойство с осторожностью. Оно решает большое количество проблем, но его нужно использовать обдуманно, чтобы не создать новые.

Браузер тоже заслуживает уважения

Неумеренное использование notransition может отрицательно сказаться на производительности браузера. Убедитесь, что добавление и удаление классов не приводят к замедлению работы вашего сайта.

Полезные материалы

1. Использование CSS-переходов – MDN — детальное руководство по работе с CSS-переходами.
2. Перезапуск CSS-анимации – CSS-Tricks — обзор методов управления CSS-анимациями.
3. Как отключить CSS-переходы – Stack Overflow — обсуждение способов отключения CSS-переходов сообществом разработчиков.
4. CSS и JS анимации: что быстрее? — сравнение производительности CSS- и JavaScript-анимаций.
5. Переключение классов CSS – w3schools — руководство по использованию JavaScript для работы с классами CSS.
6. CSS-переходы – W3C — официальная спецификация CSS-переходов.