如何使用CSS和JavaScript为Material Icons实现菜单与关闭图标的切换动画？

嘿，我懂你想要的那种流畅感——现在图标切换是瞬间跳转的，确实有点生硬。问题出在你直接修改了textContent，浏览器会立刻替换图标内容，根本没给过渡动画留发挥的空间。咱们换个思路，让两个图标同时存在，用CSS控制它们的显示状态和动画，就能实现平滑切换了，具体方案如下：

核心思路 #

把menu和close做成两个独立的图标元素，让它们重叠在同一个容器里，通过CSS的opacity（透明度）和transform（变换）属性结合过渡动画，实现切换时的淡入淡出+旋转效果，让整个过程自然流畅。

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* 图标容器：作为两个图标的定位父级，同时控制整体旋转动画 */
.icon-container {
  position: relative;
  font-size: 40px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* 通用图标样式：绝对定位让两个图标完全重叠 */
.material-icons {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease;
}

/* 默认状态：close图标透明隐藏 */
.close-icon {
  opacity: 0;
}

/* 激活状态：切换图标透明度，同时触发容器旋转 */
.icon-container.active {
  transform: rotate(180deg);
}
.icon-container.active .menu-icon {
  opacity: 0;
}
.icon-container.active .close-icon {
  opacity: 1;
}
</style>
</head>
<body>
<div id="menuIcon" class="icon-container">
  <span class="material-icons menu-icon">menu</span>
  <span class="material-icons close-icon">close</span>
</div>
<script>
const iconContainer = document.getElementById("menuIcon");
iconContainer.addEventListener("click", function() {
  this.classList.toggle("active");
});
</script>
</body>
</html>

关键细节说明 #

• HTML结构调整：用一个div做容器，里面放两个独立的图标元素，这样我们能分别控制它们的显示状态，不用再手动替换文本内容。
• CSS定位技巧：容器设为position: relative，两个图标设为position: absolute，让它们精准重叠在同一位置，为切换动画打基础。
• 过渡动画配置：给容器加了旋转过渡，给图标加了透明度过渡，两者时长统一为0.3秒，保证动画节奏一致。
• 简化JS逻辑：点击时只需要给容器切换active类，剩下的显示切换和动画都交给CSS处理，代码更简洁易维护。

要是你想玩点更个性化的效果，比如加个缩放动画，只需要在.material-icons的transition里加上transform，再在active类里给图标加transform: scale(1.1)这类属性就行啦！

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