CSS动画失效：点击菜单按钮后.rightbox导航菜单不显示

1. 核心问题分析 #

你遇到的问题根源有两个：

• CSS状态选择器的局限性：:active仅在鼠标按住按钮时生效，松开后状态立刻消失；如果.menu-button是<div>这类默认不可聚焦的元素，:focus-within也无法触发——因为元素本身没有获取焦点的能力。
• display属性无法触发动画：从display: none切换到display: block时，浏览器不会计算过渡/动画，因为元素在none状态下不参与渲染布局。

2. 具体解决方案 #

方案一：JavaScript控制类（最稳定的交互方案）

通过JS绑定点击事件，用添加/移除类的方式控制菜单显示，同时解决动画触发问题。

CSS代码调整：

@media(max-width:800px) {
  /* 默认隐藏菜单，用可过渡属性实现动画效果 */
  .rightbox {
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    /* 补充布局样式 */
    position: fixed;
    top: 60px;
    right: 0;
    width: 100%;
    background-color: #fff;
  }

  /* 菜单显示状态的类 */
  .rightbox.show-menu {
    visibility: visible;
    opacity: 1;
    height: auto;
    /* 若使用自定义动画，替换transition为以下代码 */
    /* animation: showMenu 0.3s forwards; */
  }

  /* 自定义showMenu动画（可选） */
  @keyframes showMenu {
    0% {
      opacity: 0;
      transform: translateY(-15px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* 给菜单按钮添加可聚焦属性，支持键盘操作 */
  .menu-button {
    cursor: pointer;
    tab-index: 0;
  }
}

JavaScript代码：

const menuBtn = document.querySelector('.menu-button');
const rightBox = document.querySelector('.rightbox');

// 点击按钮切换菜单显示状态
menuBtn.addEventListener('click', () => {
  rightBox.classList.toggle('show-menu');
});

// 可选：点击页面其他区域自动关闭菜单
document.addEventListener('click', (e) => {
  if (!menuBtn.contains(e.target) && !rightBox.contains(e.target)) {
    rightBox.classList.remove('show-menu');
  }
});

方案二：纯CSS优化（适合简单场景）

如果坚持用纯CSS实现，需要修正选择器触发条件：

• 给.menu-button添加tabindex="0"，让它可以被聚焦；
• 改用:focus或:focus-within触发菜单显示（但此方案无法实现点击外部关闭菜单）。

示例CSS：

@media(max-width:800px) {
  .menu-button {
    tabindex: 0;
    cursor: pointer;
  }

  .rightbox {
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  /* 按钮聚焦时显示菜单 */
  .menu-button:focus + .rightbox,
  .menu-button:focus-within + .rightbox {
    visibility: visible;
    opacity: 1;
    height: auto;
  }
}

3. 关键注意点 #

• 永远不要用display: none控制需要动画的元素，改用visibility、opacity、height或transform这些可过渡的属性；
• 纯CSS方案在用户体验上有明显局限，推荐用JavaScript实现完整的交互逻辑。

内容的提问来源于stack exchange，提问作者surik.v