如何用CSS实现菜单图标与关闭图标之间的切换动画？

前端开发 2026-07-11

我正在为一个网站的导航切换按钮工作，希望在用户点击按钮时，在两种Material Design图标之间切换，即menu和 close。当下，图标切换是瞬间完成的，没有任何动画。我想添加一个平滑的过渡效果，这样两种图标之间的切换在视觉上会更具美感。

目前我使用Material Icons的方式是这样的：

let icon = document.getElementById("icon");

icon.addEventListener("click", function() {

  icon.classList.add("animate");

  setTimeout(function() {

    if (icon.innerText === "menu") {
      icon.innerText = "close";
    } else {
      icon.innerText = "menu";
    }

    icon.classList.remove("animate");

  }, 200);

});

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial;
}

/* Icon Style */
#icon {
  font-size: 60px;
  cursor: pointer;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

/* Animation class */
.animate {
  transform: rotate(180deg) scale(1.2);
  opacity: 0.6;
}

<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span id="icon" class="material-icons">menu</span>

解决方案

你分享的代码中不包含任何Angular代码。请参考Angular文档，熟悉Angular的特性。

Angular.dev - 概览

我们可以使用一个名为 toggle 的布尔信号，并通过切换它来添加/移除animate类，从而实现这个效果。

TS：

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <span id="icon" class="material-icons" [class.animate]="toggle()" (click)="toggle.set(!toggle())">
    {{toggle() ? 'menu' : 'close'}}
  </span>
  `,
})
export class App {
  toggle = signal(false);
}