在 Angular 上安装 Hamburger CSS

Posted 2023-03-06

技术标签:

【中文标题】在 Angular 上安装 Hamburger CSS【英文标题】：Install Hamburger CSS on Angular 【发布时间】：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 文件吗？ ***.com/questions/40726081/… 【参考方案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：