当前位置：首页 > JavaScript

js实现slidedown

2026-02-01 05:06:05JavaScript

实现 SlideDown 效果

使用 JavaScript 实现 SlideDown 效果可以通过操作元素的 height 和 transition 属性来完成。以下是几种常见的实现方式：

使用 CSS Transition 和 JavaScript

定义一个 CSS 类，包含过渡效果：

.slide-down {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

JavaScript 代码切换类并设置最终高度：

function slideDown(element) {
  element.style.maxHeight = '0';
  element.classList.add('slide-down');

  // 强制重绘
  element.offsetHeight;

  element.style.maxHeight = element.scrollHeight + 'px';

  // 过渡结束后移除类
  element.addEventListener('transitionend', function() {
    element.classList.remove('slide-down');
    element.style.maxHeight = '';
  }, { once: true });
}

使用 requestAnimationFrame 实现动画

更精细控制的版本：

function slideDown(element, duration = 300) {
  const startHeight = 0;
  const endHeight = element.scrollHeight;
  const startTime = performance.now();

  function animate(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);

    element.style.height = (startHeight + (endHeight - startHeight) * progress) + 'px';

    if (progress < 1) {
      requestAnimationFrame(animate);
    } else {
      element.style.height = '';
    }
  }

  element.style.height = '0px';
  element.style.overflow = 'hidden';
  requestAnimationFrame(animate);
}

使用 jQuery 风格的实现

如果需要类似 jQuery 的 slideDown 方法：

js实现slidedown

function slideDown(element, options = {}) {
  const duration = options.duration || 400;
  const easing = options.easing || 'ease-out';

  element.style.transition = `height ${duration}ms ${easing}`;
  element.style.height = '0';
  element.style.overflow = 'hidden';

  // 触发重排
  element.offsetHeight;

  element.style.height = `${element.scrollHeight}px`;

  const onTransitionEnd = () => {
    element.style.transition = '';
    element.style.height = '';
    element.removeEventListener('transitionend', onTransitionEnd);
  };

  element.addEventListener('transitionend', onTransitionEnd);
}