Анимация иконки материалов для преобразования: Гамбургер в X

Question

Долгое время читатель, первый постер. Я хочу, чтобы при нажатии кнопки гамбургер материала преобразовывался в «X», а затем снова возвращался при повторном нажатии в приложении Angular. Сайт https://material.io/design/iconography/animated-icons.html#transitions показывает, что есть анимации, как я хочу, но нет никаких документов о том, как это сделать.

Я попробовал подход CSS, но он не показывается, и было бы хорошо, чтобы проект соответствовал значкам материала.

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar top-bar"></span>
  <span class="icon-bar middle-bar"></span>
  <span class="icon-bar bottom-bar"></span>
</button>

CSS

navbar-toggle {
  border: none;
  background: transparent !important;

  &:hover {
    background: transparent !important;
  }

  .icon-bar {
    width: 22px;
    transition: all 0.2s;
  }
  .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }
  .middle-bar {
    opacity: 0;
  }
  .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
  }
}

.navbar-toggle.collapsed {
  .top-bar {
    transform: rotate(0);
  }
  .middle-bar {
    opacity: 1;
  }
  .bottom-bar {
    transform: rotate(0);
  }
}

Приведенный выше код является обходным путем к значкам материалов. Когда я запускаю приведенный выше код, я получаю прозрачную кнопку без анимации. Если кто-нибудь знает, как сделать переход от гамбургера к «X» в угловом с начальной загрузкой, я был бы очень признателен.

Answer 1

Я сделал это простым stackblitz , используя только угловую анимацию (без начальной загрузки), которая все еще требует некоторой работы в CSS состояний анимации, чтобы сделать ее красивой и плавной, но вы можете понять это.