如何使用CSS和JavaScript为Material Icons的菜单与关闭图标切换添加动画效果？

嘿，我来帮你搞定这个Material Icons切换的平滑动画问题～

你目前的实现是直接修改图标文本，这会导致图标瞬间替换，自然没法出现平滑过渡效果。要实现流畅的动画，我们得换个思路：把menu和close两个图标放在同一个容器里，通过控制它们的透明度、旋转状态来完成切换，而不是直接替换文字内容。

• 用一个容器包裹两个Material Icons图标，让它们完全叠加在同一位置
• 默认只显示其中一个图标，另一个通过透明度隐藏
• 点击按钮时，通过切换CSS类来控制两个图标的显隐和动画状态
• 结合opacity和transform属性的过渡效果，实现淡入淡出+旋转的组合动画

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* 按钮容器：相对定位，固定尺寸避免切换时晃动 */
.nav-toggle {
  position: relative;
  font-size: 40px;
  cursor: pointer;
  width: 40px;
  height: 40px;
}

/* 内部图标通用样式：绝对定位铺满容器，添加过渡效果 */
.nav-toggle .material-icons {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s ease;
}

/* 默认状态：显示menu图标，close图标透明并旋转180度隐藏 */
.nav-toggle .close-icon {
  opacity: 0;
  transform: rotate(180deg);
}

/* 切换后的状态：显示close图标，menu图标透明并旋转180度隐藏 */
.nav-toggle.active .menu-icon {
  opacity: 0;
  transform: rotate(180deg);
}
.nav-toggle.active .close-icon {
  opacity: 1;
  transform: rotate(0deg);
}
</style>
</head>
<body>
<!-- 用容器包裹两个图标，实现叠加效果 -->
<div class="nav-toggle" id="menuToggle">
  <span class="material-icons menu-icon">menu</span>
  <span class="material-icons close-icon">close</span>
</div>

<script>
const toggleBtn = document.getElementById("menuToggle");
toggleBtn.addEventListener("click", function() {
  // 只需要切换容器的active类，就能触发动画切换
  this.classList.toggle("active");
});
</script>
</body>
</html>

1. 容器定位：.nav-toggle设置为相对定位，内部两个图标用绝对定位，确保它们完全重叠在同一个位置上。
2. 过渡设置：给每个图标添加transition: all 0.3s ease，让透明度和旋转的变化都有0.3秒的平滑过渡。
3. 初始状态：close图标默认透明度为0且旋转180度，完全隐藏在menu图标下方。
4. 点击切换：点击容器时切换active类，此时menu图标逐渐透明并旋转消失，close图标逐渐显示并旋转回初始状态，形成连贯的动画效果。

如果想要更生动的动画，可以用贝塞尔曲线调整过渡函数，再加上缩放效果：

.nav-toggle .material-icons {
  /* 用贝塞尔曲线实现弹性过渡 */
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.nav-toggle .close-icon {
  opacity: 0;
  transform: rotate(180deg) scale(0.5);
}
.nav-toggle.active .menu-icon {
  opacity: 0;
  transform: rotate(180deg) scale(0.5);
}
.nav-toggle.active .close-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

这样修改后，图标切换会带有弹性缩放+旋转+淡入淡出的复合动画，视觉效果更流畅自然～

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