无法使用 CSS 旋转 Angular 15 中的 font-awesome 图标

Question

我试图让一个带有 fa 图标的按钮旋转 180 度，然后在再次单击时以另一种方式向后旋转。到目前为止，我已经有了这个（在 stackblitz 中重现），但是当单击按钮时图标根本不旋转。这可以通过 CSS 来实现吗？还是我需要用其他方法来实现？

堆栈闪电战：https://stackblitz.com/edit/angular-ivy-5nbjjw?file=src%2Fapp%2Fapp.component.css

app.component.css

.expandButton:focus i {
  animation: rotate 1s ease-in-out 0s;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

app.component.ts

import { Component, VERSION } from '@angular/core';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  faChevronDown = faChevronDown;
}

app.component.html

<button class="expandButton" mat-raised-button color="primary" type="button">
  <i><fa-icon [icon]="faChevronDown"></fa-icon></i>
</button>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { PhotoGalleryComponent } from './components/photo-gallery/photo-gallery.component';
import {
  FaIconLibrary,
  FontAwesomeModule,
} from '@fortawesome/angular-fontawesome';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    PhotoGalleryComponent,
    FontAwesomeModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIcons(faChevronDown);
  }
}

Answer 1

您可以简单地使用属性绑定：

  <i><fa-icon [icon]="!slideOpen ? faChevronDown : faChevronUp"></fa-icon></i>

这是一个有效的解决方案