js实现抽屉

使用HTML和CSS创建基本结构

抽屉效果通常需要一个隐藏的面板，通过触发按钮显示。HTML结构包含一个按钮和一个隐藏的抽屉面板。CSS负责初始隐藏抽屉并定义动画效果。

<button id="toggleDrawer">打开抽屉</button>
<div class="drawer" id="drawer">
  <p>抽屉内容</p>
</div>

.drawer {
  position: fixed;
  top: 0;
  left: -300px; /* 初始隐藏 */
  width: 300px;
  height: 100%;
  background: #fff;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  transition: left 0.3s ease;
}
.drawer.open {
  left: 0; /* 显示抽屉 */
}

添加JavaScript交互逻辑

通过监听按钮点击事件，切换抽屉的显示状态。使用classList.toggle方法动态添加或移除open类。

document.getElementById('toggleDrawer').addEventListener('click', function() {
  document.getElementById('drawer').classList.toggle('open');
});

实现滑动动画

CSS的transition属性控制动画效果。通过调整left或transform属性实现平滑滑动。transform性能更优，适合复杂场景。

.drawer {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.drawer.open {
  transform: translateX(0);
}

添加遮罩层增强体验

在抽屉外添加半透明遮罩层，点击后可关闭抽屉。HTML增加遮罩元素，CSS定义样式。

<div class="overlay" id="overlay"></div>

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.overlay.active {
  opacity: 1;
  pointer-events: auto;
}

const overlay = document.getElementById('overlay');
document.getElementById('toggleDrawer').addEventListener('click', function() {
  const drawer = document.getElementById('drawer');
  drawer.classList.toggle('open');
  overlay.classList.toggle('active');
});
overlay.addEventListener('click', function() {
  document.getElementById('drawer').classList.remove('open');
  overlay.classList.remove('active');
});

支持键盘交互

监听键盘事件，按下ESC键时关闭抽屉。增强无障碍体验。

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    document.getElementById('drawer').classList.remove('open');
    document.getElementById('overlay').classList.remove('active');
  }
});

响应式适配

通过媒体查询调整抽屉宽度，确保在不同设备上正常显示。

@media (max-width: 600px) {
  .drawer {
    width: 80%;
    transform: translateX(-100%);
  }
}