Не работает transition

Question

При нажатие на блок с языком(RU) должен появляться с анимацией список с другими языками. Проблема в том что данный список появляется без анимации.

const accordion = document.querySelectorAll(".head-accordion__item");

accordion.forEach(accordion => {
    accordion.addEventListener('click', () => {
        accordion.classList.toggle("active");
    })
});

body {
    background-color: blueviolet;
}
.head-accordion {
    width: 150px;
    position: relative;
}
.head-accordion__item {
    color: #FFF;
    position: relative;
    box-sizing: border-box;
    padding-right: 15px;
    cursor: pointer;
}
.head-accordion__list-drop {
    background-color: transparent;
    max-height: 0;
    overflow: hidden;
    position: absolute;
    top: 25px;
    right: 5px;
    transition: max-height 0.7s ease-out;
}
.head-accordion__item-drop {
    color: #FFF;
    box-sizing: border-box;
    max-width: 46px;
    width: 100%;
    text-align: center;
    padding-bottom: 3px;
    margin-bottom: 6px;
    border-bottom: 1px solid #000;
    cursor: pointer;
}
.head-accordion__item.active .head-accordion__list-drop {
    max-height: 1000px;
}

<div class="head-accordion">
                                    <ul class="head-accordion__list">
                                        <li class="head-accordion__item">RU
                                            <ul class="head-accordion__list-drop">
                                                <li class="head-accordion__item-drop">UA</li>
                                                <li class="head-accordion__item-drop">EN</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>

Answer 1

Тут вы не правы, анимация отрабатывает, вы ее не видите, но она есть. Просто очень быстро отрабатывает. Судя по вашим стилям, блок с языками расширяется (изменяется его максимальная высота) с 0 до 1000px за 0,7 секунд при том, что каждый элемент списка (по крайней мере на моем мониторе) занимает 22px. Уменьшите высоту, до которой расширяется блок (пример 1), или измените параметры transition (Пример 2)

Пример 1:

const accordion = document.querySelectorAll(".head-accordion__item");

accordion.forEach(accordion => {
  accordion.addEventListener('click', () => {
    accordion.classList.toggle("active");
  })
});

body {
  background-color: blueviolet;
}

.head-accordion {
  width: 150px;
  position: relative;
}

.head-accordion__item {
  color: #FFF;
  position: relative;
  box-sizing: border-box;
  padding-right: 15px;
  cursor: pointer;
}

.head-accordion__list-drop {
  background-color: transparent;
  max-height: 0;
  overflow: hidden;
  position: absolute;
  top: 25px;
  right: 5px;
  transition: max-height 0.7s ease-out;
}

.head-accordion__item-drop {
  color: #FFF;
  box-sizing: border-box;
  max-width: 46px;
  width: 100%;
  text-align: center;
  padding-bottom: 3px;
  margin-bottom: 6px;
  border-bottom: 1px solid #000;
  cursor: pointer;
}

.head-accordion__item.active .head-accordion__list-drop {
  max-height: 100px;
}

<div class="head-accordion">
  <ul class="head-accordion__list">
    <li class="head-accordion__item">RU
      <ul class="head-accordion__list-drop">
        <li class="head-accordion__item-drop">UA</li>
        <li class="head-accordion__item-drop">EN</li>
      </ul>
    </li>
  </ul>
</div>

Пример 2:

const accordion = document.querySelectorAll(".head-accordion__item");

accordion.forEach(accordion => {
  accordion.addEventListener('click', () => {
    accordion.classList.toggle("active");
  })
});

body {
  background-color: blueviolet;
}

.head-accordion {
  width: 150px;
  position: relative;
}

.head-accordion__item {
  color: #FFF;
  position: relative;
  box-sizing: border-box;
  padding-right: 15px;
  cursor: pointer;
}

.head-accordion__list-drop {
  background-color: transparent;
  max-height: 0;
  overflow: hidden;
  position: absolute;
  top: 25px;
  right: 5px;
  transition: max-height 3s ease-out; /* Более долгая анимация с замедлением в конце */
}

.head-accordion__item-drop {
  color: #FFF;
  box-sizing: border-box;
  max-width: 46px;
  width: 100%;
  text-align: center;
  padding-bottom: 3px;
  margin-bottom: 6px;
  border-bottom: 1px solid #000;
  cursor: pointer;
}

.head-accordion__item.active .head-accordion__list-drop {
  max-height: 1000px;
  transition: max-height 3s ease-in; /* Более долгая анимация с замедлением в начале */
}

<div class="head-accordion">
  <ul class="head-accordion__list">
    <li class="head-accordion__item">RU
      <ul class="head-accordion__list-drop">
        <li class="head-accordion__item-drop">UA</li>
        <li class="head-accordion__item-drop">EN</li>
      </ul>
    </li>
  </ul>
</div>

БЛОГ НА HUSL

Не работает transition

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