Не удается добиться оптимальной анимации

Question

.sst {
  display:flex;
  align-items: center;
  gap:15px;
  height: 0;
  overflow: hidden;
  transition: 3s all ease-in-out;
}

.open .sst {
  animation: opp .3s ease-in-out 1 normal forwards
}

@keyframes opp {
  0% {padding-top:0; height: 0; opacity: 0}
  to {padding-top:15px; height: unset; opacity: 1}
}

При наличии класса open, открываем блок, увеличиваем высоту по дочерним блокам, увеличиваем padding и opacity;

Добавляем класс open, анимация работает. Но как выполнить так, чтобы анимация была противоположной, удалив класс open и не добавляя новых?

Answer 1

trigger.addEventListener('mouseenter', () => {
  animation.style.display = 'flex';
  animation.classList.add('open');
});
trigger.addEventListener('mouseleave', () => animation.classList.remove('open'));

#trigger {
  background: lightsalmon;
}

.sst {
  display: none;
  align-items: center;
  gap: 15px;
  height: 0;
  overflow: hidden;
  transition: 3s all ease-in-out;
  background: rosybrown;
  animation: opp_up .3s ease-in-out normal forwards;
}

.sst.open {
  animation: opp_down .3s ease-in-out normal forwards;
}

@keyframes opp_down {
  from {
    padding-top: 0;
    height: 0;
    opacity: 0;
  }
  to {
    padding-top: 15px;
    height: unset;
    opacity: 1;
  }
}

@keyframes opp_up {
  to {
    padding-top: 0;
    height: 0;
    opacity: 0;
  }
  from {
    padding-top: 15px;
    height: unset;
    opacity: 1;
  }
}

<div id="trigger">Hover me</div>
<div id="animation" class="sst"></div>

БЛОГ НА HUSL

Не удается добиться оптимальной анимации

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