如何为WordPress Astra主题移动端汉堡菜单添加动画效果

核心思路 #

Astra默认通过display: none/block切换菜单与关闭图标，这类属性无法触发CSS过渡动画。我们需要用opacity、visibility和transform替代默认逻辑，并利用按钮的aria-expanded属性（菜单打开时会变为true）控制状态切换。

步骤1：添加自定义CSS实现动画 #

将以下代码粘贴到WordPress后台「外观 → 自定义 → 额外CSS」中（此处CSS优先级高于主题默认样式，无需担心被覆盖）：

/* 重置图标容器布局，让两个SVG重叠 */
.mobile-menu-toggle-icon {
  position: relative;
  width: 24px;
  height: 24px;
}

/* 让两个图标绝对定位，重叠在同一位置 */
.ahfb-svg-iconset {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s ease;
}

/* 默认状态：菜单图标显示，关闭图标隐藏 */
.ast-menu2-svg {
  opacity: 1;
  visibility: visible;
  transform: rotate(0deg);
}

.ast-close-svg {
  opacity: 0;
  visibility: hidden;
  transform: rotate(90deg);
}

/* 菜单展开状态：切换图标状态并触发动画 */
.menu-toggle[aria-expanded="true"] .ast-menu2-svg {
  opacity: 0;
  visibility: hidden;
  transform: rotate(-90deg);
}

.menu-toggle[aria-expanded="true"] .ast-close-svg {
  opacity: 1;
  visibility: visible;
  transform: rotate(0deg);
}

步骤2：解决缓存与优先级问题 #

如果动画仍不生效，排查以下点：

• 强制刷新浏览器缓存（快捷键Ctrl+Shift+R），同时清空WordPress缓存插件（如WP Rocket、W3 Total Cache）的缓存。
• 若Astra主题自带缓存功能，在主题设置的「性能」板块清除主题缓存。
• 若CSS优先级仍不足，可临时在属性后添加!important（仅应急使用），例如：

  .menu-toggle[aria-expanded="true"] .ast-menu2-svg {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: rotate(-90deg) !important;
  }
  

可选：给菜单容器添加展开动画 #

如果需要给菜单面板也加动画，可添加以下代码：

/* 移动端菜单容器展开/收起动画 */
.ast-mobile-menu-wrap {
  transition: max-height 0.4s ease, opacity 0.4s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.ast-mobile-menu-wrap.ast-menu-toggle-active {
  max-height: 1000px; /* 设置足够大的值覆盖菜单高度 */
  opacity: 1;
}

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