Как плавно убрать задний фон при нажатии?

Рейтинг: 0Ответов: 1Опубликовано: 04.02.2023

Сделал смену заднего фона через keyframe с opacity от 0 к 100%, как сделать чтобы при повторном нажатии на кнопку меню цвет не резко переключался на основной, а так же плавно переходил?

@keyframes opasit {
0% {opacity: 0;}
100% {opacity: 1;}
}

.body {
background-color: aquamarine;
}

.body.active {
background: #000000;
opacity: 0;
animation: opasit 2s forwards;
-webkit-animation: opasit 2s forwards;
-moz-animation: opasit 2s forwards;
}

В JS всё до элементарного просто:

headerButton.addEventListener('click' , function() {
headerButton.classList.toggle('active');
menuView.classList.toggle('active');
menuBackground.classList.toggle('active');
});

Все элементы заранее переданы в переменные.

css javascript css-animation анимация
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

Один из вариантов:

const headerButton = document.getElementById('headerButton');
const bodyBackground = document.querySelector('body');

headerButton.addEventListener('click', function() {
  bodyBackground.classList.toggle('active');
});
body {
  background-color: aquamarine;
  transition: background-color .8s;
}

body.active {
  background: #000000;
}
<button id="headerButton">color change</button>