Не работает анимация burger-list. Что делать?

Question

[TtT RrR]

Хочу анимировать бургер с помощью прозрачности, но он не работает

<header>
      <div class="header__container container">
        <nav class="header__nav">
          <a href="#main-preview" class="header__logo">LevelUp</a>
          <ul class="header__list">
            <li><a href="#main-preview" class="header__link">Главная</a></li>
            <li><a href="#main-compound" class="header__link">Состав</a></li>
            <li><a href="#main-comment" class="header__link">Отзывы</a></li>
            <li><a href="#main-about" class="header__link">О продукте</a></li>
            <li><a href="#main-order" class="header__link">Форма заказа</a></li>
          </ul>
          <button class="header__burger"></button>
        </nav>
      </div>
</header>

header {
  position: fixed;
  z-index: 10;
  width: 100%;
  background-color: rgba($color: #000000, $alpha: 0.3);
}

.header {

  &__nav {
    display: flex;
    height: 60px;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
  }

  &__logo {
    color: $color-yellow;
    font-size: 32px;
    line-height: calc(38/32*100%);
    transition: text-shadow .3s ease;

    &:hover {
      text-shadow: 1px 1px 10px $color-yellow;
    }
  }

  &__list {
    display: flex;
    list-style: none;

    li:not(:last-child) {
      margin-right: 20px;
    }
  }

  &__link {
    color: $color-white;
    font-size: 16px;
    line-height: calc(19px/16px*100%);
    position: relative;

    &::before {
      content: "";
      height: 1px;
      position: absolute;
      width: 0%;
      background-color: $color-white;
      bottom: 0;
      display: block;
      transition: width .3s ease;
    }

    &:hover:before {
      width: 100%;
    }
  }

  &__burger {
    display: none;
    mask: url(../images/icons/burger.svg) center/100% no-repeat;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 10;
    transition: transform .3s ease;
    background-color: $color-white;

    &.close {
      mask-image: url(../images/icons/close.svg);
      transform: rotateX(180deg);
    }
  }
}

@media (max-width: 575px) {
  header {}

  .header {
    &__logo {
      font-size: 24px;
    }

    &__list {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      background-color: rgba($color: #000000, $alpha: 0.3);
      width: 100%;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow-y: auto;
      opacity: 0;
      transition: opacity .3s ease;

      &.burger-active {
        display: flex;
        opacity: 1;
      }

      li:not(:last-child) {
        margin: 0 0 20px 0;
      }
    }

    &__link {
      font-size: 30px;
    }

    &__burger {
      display: block;
    }
  }

}

const burger = document.querySelector('header .header__burger');
const burgerBody = document.querySelector('body');
const list = document.querySelector('header .header__list');
burger.addEventListener('click', function(){
    burgerBody.classList.toggle('lock');
    burger.classList.toggle('close');
    list.classList.toggle('burger-active');
});

Answer 1

[Виталий Першин]

Потому что display: none; не анимируется. Как вариант появление можно анимировать при помощи animation

.burger-active {
	animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

а вот если нужно исчезновение анимировать, тогда, либо отказаться от diplay: none; , либо к примеру добавлять промежуточный класс который покажет анимацию исчезновения и в конце поставить display: none;

Comments

[TtT RrR]

так пойдёт?

&__list {
      display: flex;
      opacity: 0;
      visibility:hidden;
      transition: opacity .3s ease;

      &.burger-active {
        opacity: 1;
        visibility: visible;
      }
}

[Виталий Першин]

TtT RrR, Да, можно так