Сброс плавных переходов при ресайзе страницы

Такой же эффект будет происходить даже, если плавность для свойства элемента задана конкретно, но оно имеет отличные значения на других экранах.

Для того, чтобы отключить все плавные переходы при ресайзе, можно использовать небольшой JS:

let transtimer = 0;
window.addEventListener('resize', function () {
	if (transtimer) {
		clearTimeout(transtimer);
		transtimer = null;
		} else {
		document.body.classList.add('stop-transitions');
		transtimer = setTimeout(() => {
			document.body.classList.remove('stop-transitions');
			transtimer = null;
		}, 500);
	}
	});

let transtimer = 0;

window.addEventListener('resize', function () {

if (transtimer) {

clearTimeout(transtimer);

transtimer = null;

} else {

document.body.classList.add('stop-transitions');

transtimer = setTimeout(() => {

document.body.classList.remove('stop-transitions');

transtimer = null;

}, 500);

}

});

И добавляем CSS, который будет включаться и удалять все плавности:

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

body.stop-transitions * {

transition: none !important;

}

Результат работы данного скрипта можно увидеть на этой странице.

Смотрите также:

Добавить комментарий: