当前位置：首页 > JavaScript

js实现滑进滑出效果

2026-04-04 17:00:26JavaScript

滑进滑出效果的实现方法

滑进滑出效果可以通过CSS过渡（transition）或JavaScript动画实现。以下是几种常见的实现方式：

使用CSS过渡和JavaScript切换类

通过添加/移除CSS类触发过渡效果，适合简单的滑入滑出需求。

// HTML结构
<div id="box" class="hidden">内容</div>
<button id="toggleBtn">切换</button>

// CSS样式
.hidden {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.3s ease;
}
.visible {
  opacity: 1;
  transform: translateX(0);
}

// JavaScript代码
const box = document.getElementById('box');
const toggleBtn = document.getElementById('toggleBtn');

toggleBtn.addEventListener('click', () => {
  box.classList.toggle('hidden');
  box.classList.toggle('visible');
});

使用Web Animation API

现代浏览器支持的API，性能较好且控制灵活。

const box = document.getElementById('box');
const toggleBtn = document.getElementById('toggleBtn');
let isHidden = true;

toggleBtn.addEventListener('click', () => {
  if (isHidden) {
    box.animate([
      { transform: 'translateX(-100%)', opacity: 0 },
      { transform: 'translateX(0)', opacity: 1 }
    ], {
      duration: 300,
      easing: 'ease-in-out'
    });
  } else {
    box.animate([
      { transform: 'translateX(0)', opacity: 1 },
      { transform: 'translateX(-100%)', opacity: 0 }
    ], {
      duration: 300,
      easing: 'ease-in-out'
    });
  }
  isHidden = !isHidden;
});

使用requestAnimationFrame实现手动动画

需要精细控制动画时可采用此方法。

const box = document.getElementById('box');
const toggleBtn = document.getElementById('toggleBtn');
let isAnimating = false;
let isHidden = true;
let startTime;

function slide(timestamp) {
  if (!startTime) startTime = timestamp;
  const progress = (timestamp - startTime) / 300;

  if (isHidden) {
    const translateX = -100 + (100 * Math.min(progress, 1));
    const opacity = Math.min(progress, 1);
    box.style.transform = `translateX(${translateX}%)`;
    box.style.opacity = opacity;
  } else {
    const translateX = 0 - (100 * Math.min(progress, 1));
    const opacity = 1 - Math.min(progress, 1);
    box.style.transform = `translateX(${translateX}%)`;
    box.style.opacity = opacity;
  }

  if (progress < 1) {
    requestAnimationFrame(slide);
  } else {
    isAnimating = false;
    isHidden = !isHidden;
  }
}

toggleBtn.addEventListener('click', () => {
  if (!isAnimating) {
    isAnimating = true;
    startTime = null;
    requestAnimationFrame(slide);
  }
});

使用第三方动画库（如GSAP）

对于复杂动画需求，推荐使用专业动画库。

js实现滑进滑出效果

// 引入GSAP库后
const box = document.getElementById('box');
const toggleBtn = document.getElementById('toggleBtn');
let isHidden = true;

toggleBtn.addEventListener('click', () => {
  if (isHidden) {
    gsap.to(box, {
      x: 0,
      opacity: 1,
      duration: 0.3,
      ease: "power2.inOut"
    });
  } else {
    gsap.to(box, {
      x: -100,
      opacity: 0,
      duration: 0.3,
      ease: "power2.inOut"
    });
  }
  isHidden = !isHidden;
});