js实现slideup
JavaScript 实现 SlideUp 效果
使用纯 JavaScript 实现类似 jQuery 的 slideUp() 效果，可以通过操作元素的 height 和 transition 属性来完成。
基础实现方案
function slideUp(element, duration = 300) {
element.style.height = element.offsetHeight + 'px';
element.style.transition = `height ${duration}ms ease`;
element.offsetHeight; // 触发重绘
element.style.height = '0';
setTimeout(() => {
element.style.display = 'none';
}, duration);
}完整实现方案（带回调）
function slideUp(element, duration = 300, callback) {
element.style.height = element.offsetHeight + 'px';
element.style.overflow = 'hidden';
element.style.transition = `height ${duration}ms ease`;
setTimeout(() => {
element.style.height = '0';
}, 10);
setTimeout(() => {
element.style.display = 'none';
if (typeof callback === 'function') {
callback();
}
}, duration + 10);
}使用示例
const box = document.getElementById('myBox');
slideUp(box, 500, () => {
console.log('Slide up completed');
});CSS 准备
确保目标元素初始状态不是 display: none，否则无法获取高度：
#myBox {
display: block;
overflow: hidden;
}注意事项
- 使用
offsetHeight获取元素的完整高度 - 通过
setTimeout确保过渡动画能够正常触发 - 过渡完成后设置
display: none隐藏元素 - 添加
overflow: hidden防止内容在高度变化时溢出
兼容性考虑
如果需要支持旧版浏览器，可以添加厂商前缀：
element.style.transition = `height ${duration}ms ease`;
element.style.webkitTransition = `height ${duration}ms ease`;
element.style.mozTransition = `height ${duration}ms ease`;
element.style.oTransition = `height ${duration}ms ease`;扩展功能
可以扩展函数以支持更多参数：
function slideUp(element, {
duration = 300,
easing = 'ease',
callback = null
} = {}) {
// 实现代码
}
