Не срабатывает анимация при закрытии

Question

[data-foo=sett_m] {
  display: none;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 10px;
  overflow: hidden;
  border-radius: 2px;
  background: rgb(28 28 28 / 90%);
  box-shadow: 0 0 4px rgb(0 0 0 / 40%); 
  width: min(30%, 600px);
  min-width: min-content;
  color: rgb(255 255 255 / 70%);
  white-space: nowrap;
  transition: 100ms all ease-in-out;
  transform: translateY(calc(-100% - 13px));
  font-size: calc(13px + 3 * ((100vw - 320px) / 1000));
  animation: mn_up .5s ease-in-out normal forwards;
  z-index: 3000
}
@keyframes mn_up {from {opacity: 1} 99% {opacity: 0} 100% {display:none}}

.menu_pl [data-foo=sett_m] {display:block; animation: mn_down .5s ease-in-out normal forwards}
@keyframes mn_down {1% {opacity: 0} to {opacity: 1}}

При добавлении класса menu_pl, анимация срабатывает. А вот когда убираем, блок резко исчезает.

Как сделать так, чтобы при открытии и закрытии, работала анимация. При этом только один класс, добавляем класс menu_pl - открываем блок, удаляем menu_pl - закрываем блок

Answer 1

Резкое пропадание блока происходит из-за свойства dislpay: none, к которому невозможно применить анимацию. Можно попробовать так:

[data-foo=sett_m] {
  display: block;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 10px;
  overflow: hidden;
  border-radius: 2px;
  background: rgb(28 28 28 / 90%);
  box-shadow: 0 0 4px rgb(0 0 0 / 40%); 
  width: min(30%, 600px);
  min-width: min-content;
  color: rgb(255 255 255 / 70%);
  white-space: nowrap;
  transition: opacity 100ms ease-in-out;
  transform: translateY(calc(-100% - 13px));
  font-size: calc(13px + 3 * ((100vw - 320px) / 1000));
  z-index: -1;
}

.menu_pl [data-foo=sett_m] {
  z-index: 3000;
  transition: opacity 100ms ease-in-out;
  opacity: 1;
}

Возможно это не самое лучшее решение, но от него можно отталкиваться дальше.

БЛОГ НА HUSL

Не срабатывает анимация при закрытии

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