动画材质图标进行变换：汉堡到 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

我仅使用 Angular 动画（无引导程序）制作了这个简单的

StackBlitz

，仍然需要在动画状态的

CSS

中进行一些工作，以使其美观流畅，但你可以明白这个想法。

Answer 2

您可以使用 hambugers 库。
我正在使用 Angular 材质，这是最接近原始材质菜单图标的。
堆栈闪电战