js实现抽屉
实现抽屉效果的方法
使用JavaScript实现抽屉效果可以通过CSS过渡或动画结合事件监听完成。以下是两种常见实现方式：
使用CSS过渡和类切换
HTML结构：
<button id="toggleBtn">切换抽屉</button>
<div class="drawer">
<div class="drawer-content">抽屉内容</div>
</div>CSS样式：
.drawer {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.drawer.open {
height: 200px;
}JavaScript代码：
const toggleBtn = document.getElementById('toggleBtn');
const drawer = document.querySelector('.drawer');
toggleBtn.addEventListener('click', () => {
drawer.classList.toggle('open');
});使用动态高度计算
当抽屉内容高度不确定时：
const toggleBtn = document.getElementById('toggleBtn');
const drawer = document.querySelector('.drawer');
const content = document.querySelector('.drawer-content');
toggleBtn.addEventListener('click', () => {
if (drawer.style.height === '0px' || !drawer.style.height) {
drawer.style.height = `${content.scrollHeight}px`;
} else {
drawer.style.height = '0';
}
});添加动画效果
使用CSS动画实现更流畅的效果：
@keyframes slideDown {
from { height: 0; }
to { height: var(--drawer-height); }
}
@keyframes slideUp {
from { height: var(--drawer-height); }
to { height: 0; }
}
.drawer.animate-down {
animation: slideDown 0.3s forwards;
}
.drawer.animate-up {
animation: slideUp 0.3s forwards;
}JavaScript部分：
toggleBtn.addEventListener('click', () => {
const contentHeight = content.scrollHeight;
if (drawer.classList.contains('animate-down')) {
drawer.style.setProperty('--drawer-height', `${contentHeight}px`);
drawer.classList.remove('animate-down');
drawer.classList.add('animate-up');
} else {
drawer.style.setProperty('--drawer-height', `${contentHeight}px`);
drawer.classList.remove('animate-up');
drawer.classList.add('animate-down');
}
});注意事项
- 确保为抽屉容器设置
overflow: hidden属性 - 移动端考虑添加
touch事件支持 - 性能优化：使用
transform替代height动画可获得更好性能 - 无障碍访问：为按钮添加
aria-expanded属性并管理焦点
以上方法可根据具体需求进行调整和组合使用。
