Отключение 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
может отрицательно сказаться на производительности браузера. Убедитесь, что добавление и удаление классов не приводят к замедлению работы вашего сайта.
Полезные материалы
- Использование CSS-переходов – MDN — детальное руководство по работе с CSS-переходами.
- Перезапуск CSS-анимации – CSS-Tricks — обзор методов управления CSS-анимациями.
- Как отключить CSS-переходы – Stack Overflow — обсуждение способов отключения CSS-переходов сообществом разработчиков.
- CSS и JS анимации: что быстрее? — сравнение производительности CSS- и JavaScript-анимаций.
- Переключение классов CSS – w3schools — руководство по использованию JavaScript для работы с классами CSS.
- CSS-переходы – W3C — официальная спецификация CSS-переходов.