Плавность открытия меню по чекбоксу

Question

Есть прототип меню работающего по checkbox. Когда checkbox.checked == true, меню открывается, если false закрывается, а так же если клик был вне меню(серая зона), то меню закрывается, а checkbox.checked == false. Код:

let checkbox = document.getElementById('menu-checkbox');
let menu = document.querySelector('.menu');

checkbox.addEventListener('click', () => {
  menu.classList.toggle('hidden');
})
menu.addEventListener('click', (event) => {
  if (event.target.classList.contains('menu')) {
    menu.classList.toggle('hidden');
    checkbox.checked = false;
  }
})

.menu{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90%;
  background-color: rgba(20,20,20,0.3);
}
.menu-item{
  width: 300px;
  height: 200px;
  background-color: beige;
}
.hidden {
  visibility: hidden;
}

    <input type="checkbox" id="menu-checkbox" name="vehicle1" value="Bike">
    <div class="menu hidden">
        <div class="menu-item"></div>
    </div>

Как добавить плавность открытия и закрытия меню?

Answer 1

Добавьте opacity и transition, см. код ниже.

let checkbox = document.getElementById('menu-checkbox');
let menu = document.querySelector('.menu');

checkbox.addEventListener('click', () => {
  menu.classList.toggle('hidden');
})
menu.addEventListener('click', (event) => {
  if (event.target.classList.contains('menu')) {
    menu.classList.toggle('hidden');
    checkbox.checked = false;
  }
})

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90%;
  background-color: rgba(20, 20, 20, 0.3);
  /*время для прозрачности и видимости*/
  transition: opacity 1s, visibility 1s;
  /*1 - полная видимость*/
  opacity: 1;
}

.menu-item {
  width: 300px;
  height: 200px;
  background-color: beige;
}

.hidden {
  /*0 - полная прозразность*/
  opacity: 0;
  visibility: hidden;
}

<input type="checkbox" id="menu-checkbox" name="vehicle1" value="Bike">
<div class="menu hidden">
  <div class="menu-item"></div>
</div>

БЛОГ НА HUSL

Плавность открытия меню по чекбоксу

Ответы (1 шт):