javascript - 如何在单击动画时更改Angular中的CSS样式

大家好，我正在构建一个汉堡菜单，当我切换菜单时，我想添加/删除现有类中的某个CSS属性。这是我的代码


  burger.component.html

<div class="top-nav--hamburger--container" (click)="handleHamburger()">
      <div  class="hamburger-bar--top"></div>
      <div class="hamburger-bar--bot"></div>
</div>

我的CSS看起来像这样

.hamburger-bar--top
    width: 30px
    height: 5px
    background: red
    border-radius: 100px
    transition: transform 50ms ease-out
    // transform: rotate(45deg) translateY(5px) translateX(5px)

.hamburger-bar--bot
    margin-top: 8px
    width: 30px
    height: 5px
    background: red
    border-radius: 100px
    transition: transform 50ms ease-out
    // transform: rotate(-45deg) translateY(-5px) translateX(4px)

我想在单击时将这些转换属性添加到现有类中，如果已经应用，则将其删除。


  burger.component.ts


showStyle：布尔=假;

  constructor() { }

  handleHamburger(){
    this.showStyle = !this.showStyle;
    ...Add the properties to the class
    ...Can not figure this part out
  }

因此，单击我想在类上添加转换属性。我不确定该怎么做。任何帮助或想法都会很棒。谢谢

最佳答案

只需使用ngClass指令来切换showStyle值的类库。

<div class="top-nav--hamburger--container"
    [ngClass]="{'class01':showStyle,'class02':!showStyle}"
    (click)="handleHamburger()">
      ...
</div>

  如果是多个类{'class01 class03 class04':showStyle,'class02':!showStyle}


您也可以在handleHamburger方法中建立班级列表

  private showStyle = false;
  public classList = {};
  public handleHamburger() {
    this.showStyle = !this.showStyle;

    if (this.showStyle) {
      this.classList = {
        'class01 class02': true,
        'class03': true
      }
    } else {
      this.classList = {
        'classs04': true
      }
    }
  }

模板

<div class="top-nav--hamburger--container"
    [ngClass]="classList"  (click)="handleHamburger()">
      ...
</div>