当前位置：首页 > JavaScript

js 实现菜单下滑

2026-04-07 08:59:33JavaScript

实现菜单下滑效果

使用 JavaScript 实现菜单下滑效果可以通过 CSS 过渡（transition）或动画（animation）结合事件监听完成。以下是几种常见方法：

使用 CSS Transition 和 JavaScript 控制

通过添加/移除类名触发 CSS 过渡效果：

.menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.menu.active {
  max-height: 500px; /* 根据实际内容调整 */
}

const toggleBtn = document.querySelector('.toggle-btn');
const menu = document.querySelector('.menu');

toggleBtn.addEventListener('click', () => {
  menu.classList.toggle('active');
});

使用 JavaScript 动态计算高度

适合不确定菜单内容高度的情况：

const menu = document.querySelector('.menu');
menu.style.maxHeight = '0';

function toggleMenu() {
  if (menu.style.maxHeight === '0px') {
    menu.style.maxHeight = menu.scrollHeight + 'px';
  } else {
    menu.style.maxHeight = '0';
  }
}

使用 CSS Animation

纯 CSS 方案结合 JavaScript 触发：

@keyframes slideDown {
  from { max-height: 0; }
  to { max-height: 500px; }
}

.menu.animate {
  animation: slideDown 0.3s forwards;
}

document.querySelector('.toggle-btn').addEventListener('click', () => {
  const menu = document.querySelector('.menu');
  menu.classList.add('animate');
});

注意事项

确保为菜单容器设置 overflow: hidden 属性
使用 max-height 而非 height 可适应不同内容高度
移动端考虑添加 transform: translateZ(0) 提升性能
对于复杂动画，推荐使用 requestAnimationFrame

高级实现（带缓动函数）

使用自定义缓动函数实现更自然效果：

js 实现菜单下滑

function slideToggle(element, duration = 300) {
  const startHeight = element.offsetHeight;
  const startTime = performance.now();

  function animate(time) {
    const elapsed = time - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const ease = easeOutQuad(progress);

    if (startHeight === 0) {
      element.style.height = `${ease * element.scrollHeight}px`;
    } else {
      element.style.height = `${(1 - ease) * startHeight}px`;
    }

    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }

  function easeOutQuad(t) {
    return t * (2 - t);
  }

  requestAnimationFrame(animate);
}