使用CSS（Glamor）实现汉堡菜单划入划出动画的问题求助

我来帮你搞定这个汉堡菜单的动画切换问题！你遇到的情况大概率是没有给菜单容器绑定关闭事件，或者状态管理逻辑没衔接好。下面我给你一套完整的实现思路和代码示例，保证能实现点击汉堡划入、点击菜单任意位置划出的效果：

核心思路 #

1. 用状态管理（比如React的useState）来控制菜单的打开/关闭状态
2. 给Glamor样式根据状态切换animateIn和animateOut动画
3. 给汉堡图标绑定状态切换事件，给菜单容器绑定关闭事件

完整代码示例 #

假设你用的是React（毕竟Glamor常和React配合使用）：

import React, { useState } from 'react';
import { css, keyframes } from 'glamor';

// 定义划入和划出的关键帧动画
const slideInRight = keyframes({
  '0%': { transform: 'translateX(100%)' },
  '100%': { transform: 'translateX(0)' }
});

const slideOutRight = keyframes({
  '0%': { transform: 'translateX(0)' },
  '100%': { transform: 'translateX(100%)' }
});

// 菜单样式：根据传入的isOpen状态切换动画
const menuStyles = ({ isOpen }) => css({
  position: 'fixed',
  top: 0,
  right: 0,
  width: '320px',
  height: '100vh',
  backgroundColor: '#f8f9fa',
  boxShadow: '-3px 0 8px rgba(0,0,0,0.15)',
  zIndex: 999,
  // 切换动画：注意加forwards让动画结束后保持最终状态
  animation: isOpen 
    ? `${slideInRight} 0.35s ease-in-out forwards` 
    : `${slideOutRight} 0.35s ease-in-out forwards`,
  // 兜底的transform，避免动画结束后位置异常
  transform: isOpen ? 'translateX(0)' : 'translateX(100%)',
  padding: '2rem',
  boxSizing: 'border-box'
});

// 汉堡图标的样式
const hamburgerBtnStyles = css({
  position: 'fixed',
  top: '1.5rem',
  right: '1.5rem',
  fontSize: '1.8rem',
  cursor: 'pointer',
  zIndex: 1000,
  backgroundColor: '#fff',
  padding: '0.5rem',
  borderRadius: '4px',
  border: 'none',
  boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
});

export default function HamburgerMenu() {
  // 维护菜单的打开状态
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // 切换菜单状态：点击汉堡图标时触发
  const toggleMenu = () => {
    setIsMenuOpen(prevState => !prevState);
  };

  // 关闭菜单：点击菜单容器内任意位置时触发
  const closeMenu = () => {
    setIsMenuOpen(false);
  };

  return (
    <>
      {/* 汉堡图标按钮 */}
      <button className={hamburgerBtnStyles} onClick={toggleMenu}>
        ☰
      </button>

      {/* 菜单容器：只有打开时才渲染，或者始终渲染但控制显示 */}
      {isMenuOpen && (
        <div className={menuStyles({ isOpen: isMenuOpen })} onClick={closeMenu}>
          {/* 菜单内容示例 */}
          <h3 style={{ marginBottom: '1.5rem' }}>导航菜单</h3>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            {/* 注意：如果菜单里有可点击元素，要阻止事件冒泡！ */}
            <li style={{ marginBottom: '1rem', fontSize: '1.1rem' }}>
              <a href="/home" onClick={(e) => e.stopPropagation()}>
                首页
              </a>
            </li>
            <li style={{ marginBottom: '1rem', fontSize: '1.1rem' }}>
              <a href="/about" onClick={(e) => e.stopPropagation()}>
                关于我们
              </a>
            </li>
            <li style={{ marginBottom: '1rem', fontSize: '1.1rem' }}>
              <a href="/contact" onClick={(e) => e.stopPropagation()}>
                联系我们
              </a>
            </li>
          </ul>
        </div>
      )}
    </>
  );
}

关键注意点 #

1. 状态驱动动画：菜单的动画完全由isMenuOpen状态控制，这是实现切换的核心，避免了手动操作DOM的麻烦。
2. 动画结束后的状态保持：在Glamor样式里添加forwards关键字，确保动画结束后菜单停留在目标位置；同时设置transform作为兜底，防止动画结束后位置跳变。
3. 阻止事件冒泡：如果菜单里有独立的可点击元素（比如链接、按钮），一定要给它们添加onClick={(e) => e.stopPropagation()}，否则点击这些元素时会触发菜单容器的关闭事件，导致意外关闭。
4. 层级管理：通过zIndex确保汉堡图标在菜单上方，避免菜单出来后点击不到汉堡图标。

这样就能完美实现你想要的效果啦！

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