如何在单击动画时更改 Angular 中的 css 样式答案

【问题标题】：How to change css styles in Angular on Click for animation如何在单击动画时更改 Angular 中的 css 样式
【发布时间】：2018-08-09 23:21:11
【问题描述】：

大家好，我正在构建一个汉堡菜单，当我切换菜单时，我想在现有类中添加/删除某个 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: boolean = false;

  constructor() { }

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

所以点击我想在类上添加转换属性。我不知道该怎么做。任何帮助或想法都会很棒。谢谢

【问题讨论】：

听起来对ngClass来说是一项快速的工作
stackoverflow.com/questions/47296759/…

标签： javascript css angular

【解决方案1】：

只需使用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>

【讨论】：

【解决方案2】：

你可以像这样添加有条件的角度样式。

<div  class="hamburger-bar--top" ng-style="hamburgerTopStyle"></div>

handleHamburger() {
    this.hamburgerTopStyle = {'font-size': '10px', 'color': 'blue'};
}

【讨论】：