Почему css-переход срабатывает только один раз?

Question

Есть дропдаун, открывается по клику, по умолчанию скрыт визуально scale: 0; и от скринридеров visibility: hidden; при открытии transition отрабатывает нормально, при закрытии-нет. Если убрать visibility, всё хорошо. Что нужно сделать, чтобы работало и с visibility?

document.querySelectorAll(".header__dropdown-btn").forEach((el, i) => {
  el.addEventListener("click", (ev) => {
    ev.preventDefault();
    ev.stopPropagation();
    fnCloseAllDropdown(ev.target.nextElementSibling);
    ev.target.nextElementSibling.classList.toggle("_show");
  });
});

document.addEventListener("click", (ev) => {
  if (ev.target.closest("._show")) return;
  ev.stopPropagation();
  fnCloseAllDropdown();
});

function fnCloseAllDropdown(obj) {
  document.querySelectorAll(".painting-style__dropdown").forEach((el, i) => {
    if (el != obj) {
      el.classList.remove("_show");
    }
  });
}

.header__dropdown-btn {
  width: 200px;
  height: 50px;
  background: green;
  color: #fff;
}

.painting-style__dropdown {
  position: absolute;
  top: 40px;
  padding: 40px;
  max-height: 200px;
  transform-origin: 0 0;
  transform: scaleY(0);
  visibility: hidden;
  background: var(--color-black-semi-transparent);
  transition: transform .4s linear;
}

.painting-style__dropdown-item:not(:last-child) {
  margin-bottom: 20px;
}

.painting-style__dropdown-link {
  display: flex;
  align-items: center;
  padding-left: 14px;
  position: relative;
  width: 220px;
  border: 2px solid transparent;
  font-size: 14px;
  color: #fff;
  background: blue;
}

.painting-style__dropdown._show {
  visibility: visible;
  transform: scaleY(1);
}

<button class="btn-reset header__dropdown-btn">Футуризм</button>
<ul class="list-reset painting-style__dropdown" data-simplebar>
  <li class="painting-style__dropdown-item">
    <a class="link-reset painting-style__dropdown-link tintoretto" href="#">Карра</a>
  </li>
  <li class="painting-style__dropdown-item">
    <a class="link-reset painting-style__dropdown-link fridrikh" href="#">Прателла</a>
  </li>
  <li class="painting-style__dropdown-item">
    <a class="link-reset painting-style__dropdown-link leonardo" href="#">Северини</a>
  </li>
  <li class="painting-style__dropdown-item">
    <a class="link-reset painting-style__dropdown-link verokeoy" href="#">Балла</a>
  </li>
</ul>

Answer 1

Необходимо добавить visibility .4s linear

Пример

document.querySelectorAll(".header__dropdown-btn").forEach((el, i) => {
  el.addEventListener("click", (ev) => {
    ev.preventDefault();
    ev.stopPropagation();
    fnCloseAllDropdown(ev.target.nextElementSibling);
    ev.target.nextElementSibling.classList.toggle("_show");
  });
});

document.addEventListener("click", (ev) => {
  if (ev.target.closest("._show")) return;
  ev.stopPropagation();
  fnCloseAllDropdown();
});

function fnCloseAllDropdown(obj) {
  document.querySelectorAll(".painting-style__dropdown").forEach((el, i) => {
    if (el != obj) {
      el.classList.remove("_show");
    }
  });
}

.header__dropdown-btn {
  width: 200px;
  height: 50px;
  background: green;
  color: #fff;
}

.painting-style__dropdown {
  position: absolute;
  top: 40px;
  padding: 40px;
  max-height: 200px;
  transform-origin: 0 0;
  transform: scaleY(0);
  visibility: hidden;
  background: var(--color-black-semi-transparent);
  transition: transform .4s linear, visibility .4s linear;
}

.painting-style__dropdown-item:not(:last-child) {
  margin-bottom: 20px;
}

.painting-style__dropdown-link {
  display: flex;
  align-items: center;
  padding-left: 14px;
  position: relative;
  width: 220px;
  border: 2px solid transparent;
  font-size: 14px;
  color: #fff;
  background: blue;
}

.painting-style__dropdown._show {
  visibility: visible;
  transform: scaleY(1);
}

<button class="btn-reset header__dropdown-btn">Футуризм</button>
<ul class="list-reset painting-style__dropdown" data-simplebar>
  <li class="painting-style__dropdown-item">
    <a class="link-reset painting-style__dropdown-link tintoretto" href="#">Карра</a>
  </li>
  <li class="painting-style__dropdown-item">
    <a class="link-reset painting-style__dropdown-link fridrikh" href="#">Прателла</a>
  </li>
  <li class="painting-style__dropdown-item">
    <a class="link-reset painting-style__dropdown-link leonardo" href="#">Северини</a>
  </li>
  <li class="painting-style__dropdown-item">
    <a class="link-reset painting-style__dropdown-link verokeoy" href="#">Балла</a>
  </li>
</ul>

БЛОГ НА HUSL

Почему css-переход срабатывает только один раз?

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