当前位置：首页 > JavaScript

js实现slideup

2026-04-06 14:54:16JavaScript

JavaScript 实现 SlideUp 效果

在 JavaScript 中实现类似 jQuery 的 slideUp() 效果，可以通过操作 CSS 的 height 和 transition 属性来完成。以下是几种实现方式：

使用 CSS Transition 和 JavaScript

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';
    element.style.removeProperty('height');
    element.style.removeProperty('transition');
  }, duration);
}

// 使用示例
const box = document.querySelector('.box');
slideUp(box, 500);

使用 requestAnimationFrame 实现更流畅的动画

function slideUp(element, duration = 300) {
  const startHeight = element.offsetHeight;
  const startTime = performance.now();

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

    element.style.height = height + 'px';

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

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

使用 CSS 动画和类切换

.slide-up {
  animation: slideUp 0.3s ease forwards;
}

@keyframes slideUp {
  from { height: var(--element-height); }
  to { height: 0; }
}

function slideUp(element, duration = 300) {
  const height = element.offsetHeight;
  element.style.setProperty('--element-height', height + 'px');
  element.style.overflow = 'hidden';
  element.classList.add('slide-up');

  // 动画结束后隐藏元素
  setTimeout(() => {
    element.style.display = 'none';
    element.classList.remove('slide-up');
    element.style.removeProperty('--element-height');
  }, duration);
}