在 Angular 上安装 Hamburger CSS答案

【问题标题】：Install Hamburger CSS on Angular在 Angular 上安装 Hamburger CSS
【发布时间】：2019-08-21 18:03:00
【问题描述】：

我的意图是在我的 Angular 项目上安装 Hamburger CSS from Jonathan Suh。

我使用npm i --s hamburgers 成功添加了包。我还将它的 CSS 文件添加到我的 angular.json 文件中。

当我尝试使用下面的代码添加汉堡包时，汉堡包正在显示，但它不可点击。这是为什么？

<button class="hamburger hamburger--collapse" type="button">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
  </button>

【问题讨论】：

doc:npmjs.com/package/hamburgers
@לבנימלכה 就我而言，我做了所有提到的事情，除了 SASS。
我认为你必须使用 sass 的这个
@לבנימלכה 我正在使用 Angular 和 CSS - 我可以只使用 SASS 文件吗？
stackoverflow.com/questions/40726081/…

标签： css angular hamburger-menu

【解决方案1】：

当您评论您使用 CSS 并在文档中写道：

如果您使用 Sass 作为 CSS，
.scss 源文件可用预编译器。它是可定制的和模块化的

Here is alternative with angular and css

HTML

<div class="collapse" (click)="ifShow=!ifShow" [ngClass]="{'hide':!ifShow}">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS：

.collapse{
  position: relative;
  cursor: pointer;
}
.collapse span{
    position: absolute;
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background-color: black;
}

.collapse span:nth-child(2) {
    top: 10px;
}
.collapse span:nth-child(3){
    top: -10px;
}

.hide span:nth-child(2) {
   transform:rotate(45deg);
   top:0;
}

.hide span:nth-child(3){
   transform:rotate(-45deg);
   top: 0;
}

.hide span:nth-child(1){
  animation:hideMain 1.5s;
  opacity: 0;
}
.hide span:nth-child(2),.hide span:nth-child(3) {
  animation:hide 1.5s;
}

@keyframes hide{
  0%{
    transform:rotate(0);
  }
  50%{
    top:0;
    transform:rotate(0);
  }
}
@keyframes hideMain{
  49%{
   opacity: 1;
  }
  50%{
  opacity: 0;
  }
}

TS：

 ifShow : boolean = true;

【讨论】：

【解决方案2】：

要遵循的步骤，

安装汉堡包。 npm install hamburgers --save
在styles.scss中导入@import '~hamburgers/_sass/hamburgers/hamburgers.scss';
在 html 中使用汉堡包 div 并切换类。 (click)="active=!active" [ngClass]="active ? 'is-active' : ''"

【讨论】：