打开1个抽屉时的切换逻辑

// 示例代码：使用CSS和JavaScript控制抽屉的打开和关闭
const drawer = document.getElementById('drawer');
const toggleButton = document.getElementById('toggleButton');

toggleButton.addEventListener('click', () => {
  drawer.classList.toggle('open');
});

// CSS
#drawer {
  transition: transform 0.3s ease;
  transform: translateX(-100%);
}

#drawer.open {
  transform: translateX(0);
}

// 示例代码：禁用页面滚动
const disableScroll = (bool) => {
  document.body.style.overflow = bool ? 'hidden' : 'auto';
};

toggleButton.addEventListener('click', () => {
  drawer.classList.toggle('open');
  disableScroll(drawer.classList.contains('open'));
});

// 示例代码：优化动画效果
#drawer {
  transition: transform 0.3s ease;
  will-change: transform; /* 提示浏览器提前优化 */
}