我的目的是在我的Angular Project上安装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>
要遵循的步骤,
npm install hamburgers --save
@import '~hamburgers/_sass/hamburgers/hamburgers.scss';
中导入(click)="active=!active" [ngClass]="active ? 'is-active' : ''"
当你评论你使用CSS并在doc写道:
如果您使用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;