OF-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 似乎在导航栏为 expanded/collapsed 而不是 adding/remove collapsed CSS 时更改 aria-expanded 属性class.

请参阅此 StackBlitz 进行演示

OF-Bootstrap Navbar-动画汉堡动画

NG-Bootstrap Navbar- animated hamburger animation

css

css-animations

bootstrap-4

ng-bootstrap

angular

HTML

scss

编辑