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
} = {}) {
  // 实现代码
}