js 实现抽屉
实现抽屉效果的 JavaScript 方法
使用 CSS 和 JavaScript 切换类
通过添加或移除 CSS 类来控制抽屉的显示与隐藏。CSS 定义抽屉的初始状态（如 transform: translateX(-100%)），JavaScript 切换类来改变状态。
.drawer {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100%;
background: #fff;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.drawer.open {
transform: translateX(0);
}const drawer = document.querySelector('.drawer');
const toggleButton = document.querySelector('.toggle-button');
toggleButton.addEventListener('click', () => {
drawer.classList.toggle('open');
});动态修改内联样式
直接通过 JavaScript 修改元素的 style 属性，适用于需要动态计算位置的场景。
const drawer = document.querySelector('.drawer');
const toggleButton = document.querySelector('.toggle-button');
toggleButton.addEventListener('click', () => {
const isOpen = drawer.style.transform === 'translateX(0px)';
drawer.style.transform = isOpen ? 'translateX(-100%)' : 'translateX(0)';
});使用动画库（如 GSAP）
通过 GSAP 实现更复杂的动画效果，例如弹性动画或缓动曲线。
import { gsap } from 'gsap';
const drawer = document.querySelector('.drawer');
const toggleButton = document.querySelector('.toggle-button');
toggleButton.addEventListener('click', () => {
const isOpen = drawer.style.transform === 'translateX(0px)';
gsap.to(drawer, {
x: isOpen ? -300 : 0,
duration: 0.5,
ease: 'power2.out'
});
});响应式抽屉实现
结合媒体查询和 JavaScript，在移动端和桌面端适配不同的抽屉行为。
@media (max-width: 768px) {
.drawer {
width: 80%;
}
}const drawer = document.querySelector('.drawer');
const toggleButton = document.querySelector('.toggle-button');
toggleButton.addEventListener('click', () => {
if (window.innerWidth < 768) {
drawer.classList.toggle('open');
} else {
// 桌面端其他逻辑
}
});无障碍优化
为抽屉添加 ARIA 属性和键盘事件支持，确保屏幕阅读器和键盘操作可用。
const drawer = document.querySelector('.drawer');
const toggleButton = document.querySelector('.toggle-button');
toggleButton.addEventListener('click', () => {
const isOpen = drawer.classList.toggle('open');
toggleButton.setAttribute('aria-expanded', isOpen);
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && drawer.classList.contains('open')) {
drawer.classList.remove('open');
toggleButton.setAttribute('aria-expanded', 'false');
}
});注意事项
- 性能优化：使用
transform和opacity属性触发 GPU 加速，避免重排。 - 遮罩层：为抽屉添加半透明遮罩（
overlay）以提升用户体验。 - 状态管理：通过
data-*属性或变量记录抽屉状态，避免频繁查询 DOM。
