NG-Bootstrap Navbar-动画的汉堡包动画

Question

我看过很多教程，如何在导航栏上制作汉堡包动画。不幸的是，当我使用ng-bootstrap和Angular时，没有任何效果。 导航栏确实塌陷了，但是没有动画并且转换为“ x”。也许有些人可以帮忙。

HTML

  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarGrey"
          aria-controls="navbarGrey" aria-label="Toggle navigation"
          (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed">

    <span class="icon-bar top-bar"></span>
    <span class="icon-bar middle-bar"></span>
    <span class="icon-bar bottom-bar"></span>
    <span class="sr-only">Toggle navigation</span>
  </button>

scss

// Navbar styling

.navbar-toggler {
  border: none;
  background: transparent !important;
}
.navbar-toggler:focus {
  outline: none;
  background: transparent !important;
}

.navbar-toggler .icon-bar {
  background-color: #fff;
  transform: rotate(0deg) translate(0px, 0px);
  transition: ease all .2s;
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.navbar-toggler .icon-bar + .icon-bar {
  margin-top: 5px;
}

//Animation part   <== does not work here

.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggler .middle-bar {
  opacity: 0;
}

.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
}

.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}

编辑

为导航栏创建了stackblitz-link。

Answer 1

对于您的动画样式，您想使用.navbar-toggler[aria-expanded="false"]进行扩展，并希望使用“ X”（而不是.navbar-toggler），而要使用.navbar-toggler[aria-expanded="true"]进行折叠（而不是.navbar-toggler.collapsed），而您想要汉堡包。动画的完整CSS是：

// Animation part
.navbar-toggler[aria-expanded="false"] .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggler[aria-expanded="false"] .middle-bar {
  opacity: 0;
}

.navbar-toggler[aria-expanded="false"] .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 0% 50%;
}

.navbar-toggler[aria-expanded="true"] .top-bar {
  transform: rotate(0);
}

.navbar-toggler[aria-expanded="true"] .middle-bar {
  opacity: 1;
}

.navbar-toggler[aria-expanded="true"] .bottom-bar {
  transform: rotate(0);
}

ng-bootstrap似乎在扩展/折叠导航栏时更改了aria-expanded属性，而不是添加/删除了collapsed CSS类。

请参阅此StackBlitz进行演示