css - 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演示