Angular 15中无法用CSS旋转Font Awesome图标问题排查

想要实现一个带有Font Awesome图标的按钮，点击时图标旋转180度，再次点击时反向旋转。目前已编写代码并复现，但点击按钮时图标完全不旋转，请问能否通过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);
  }
}

解决方案 #

核心问题分析 #

原有代码不生效的原因：

1. 使用:focus伪类触发动画，仅在按钮获得焦点时生效，焦点丢失后再次点击的触发逻辑不稳定；
2. 动画目标是360度旋转，与需求的180度不符；
3. 无法持久保存旋转状态，无法实现“再次点击反向旋转”的交互。

推荐实现（Angular 状态绑定 + CSS 过渡） #

这种方式符合Angular开发实践，状态控制清晰，交互流畅：

1. 修改组件类，添加状态变量与切换方法

// 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;
  isRotated = false; // 标记当前是否处于旋转状态

  toggleRotate() {
    this.isRotated = !this.isRotated;
  }
}

2. 更新HTML模板，绑定点击事件与状态类
   移除多余的<i>标签（Font Awesome组件本身已经是图标容器），直接绑定状态：

<!-- app.component.html -->
<button 
  class="expandButton" 
  mat-raised-button 
  color="primary" 
  type="button"
  (click)="toggleRotate()"
>
  <fa-icon [icon]="faChevronDown" [class.rotated]="isRotated"></fa-icon>
</button>

3. 编写CSS过渡动画
   用过渡替代关键帧动画，实现平滑的状态切换：

/* app.component.css */
.expandButton fa-icon {
  transition: transform 0.5s ease-in-out; /* 定义过渡动画时长与曲线 */
}

.expandButton fa-icon.rotated {
  transform: rotate(180deg); /* 旋转180度的目标状态 */
}

纯CSS替代方案（局限性） #

如果一定要纯CSS实现，可借助隐藏复选框的:checked伪类，但需要调整DOM结构，适合非框架场景：

<!-- 调整后的HTML -->
<label class="expandButton mat-raised-button primary">
  <input type="checkbox" hidden>
  <fa-icon [icon]="faChevronDown"></fa-icon>
</label>

/* 对应CSS */
.expandButton input:checked + fa-icon {
  transform: rotate(180deg);
}

.expandButton fa-icon {
  transition: transform 0.5s ease-in-out;
}

但在Angular项目中，更推荐使用组件状态绑定的方式，逻辑更清晰，便于后续扩展。

内容的提问来源于stack exchange，提问作者Blake