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"]使用.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的演示