当前位置：首页 > JavaScript

js实现slideup

2026-02-01 21:52:47JavaScript

js实现slideup

实现 SlideUp 动画效果

使用 JavaScript 实现元素的 slideUp 动画效果可以通过操作元素的 height 和 overflow 属性来实现。以下是几种常见的方法：

使用原生 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';
  element.style.overflow = 'hidden';

  setTimeout(() => {
    element.style.display = 'none';
  }, duration);
}

使用 CSS 动画

function slideUp(element, duration = 300) {
  element.style.animation = `slide-up ${duration}ms forwards`;

  // 定义 CSS 动画
  const style = document.createElement('style');
  style.textContent = `
    @keyframes slide-up {
      from { height: ${element.offsetHeight}px; }
      to { height: 0; }
    }
  `;
  document.head.appendChild(style);

  setTimeout(() => {
    element.style.display = 'none';
    document.head.removeChild(style);
  }, duration);
}

使用 jQuery 风格实现

function slideUp(element, duration = 300) {
  const el = element;
  el.style.transitionProperty = 'height, margin, padding';
  el.style.transitionDuration = duration + 'ms';
  el.style.boxSizing = 'border-box';
  el.style.height = el.offsetHeight + 'px';
  el.offsetHeight;

  el.style.overflow = 'hidden';
  el.style.height = '0';
  el.style.paddingTop = '0';
  el.style.paddingBottom = '0';
  el.style.marginTop = '0';
  el.style.marginBottom = '0';

  window.setTimeout(() => {
    el.style.display = 'none';
    el.style.removeProperty('height');
    el.style.removeProperty('padding-top');
    el.style.removeProperty('padding-bottom');
    el.style.removeProperty('margin-top');
    el.style.removeProperty('margin-bottom');
    el.style.removeProperty('overflow');
    el.style.removeProperty('transition-duration');
    el.style.removeProperty('transition-property');
  }, duration);
}

使用 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';
    element.style.overflow = 'hidden';

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

  requestAnimationFrame(animate);
}