当前位置：首页 > JavaScript

js实现左右滑入

2026-03-16 08:35:10JavaScript

使用CSS动画实现滑入效果

通过CSS的@keyframes和transform属性可以轻松实现滑入动画效果。定义一个滑入动画，通过JavaScript动态添加类名触发。

.slide-in-left {
  animation: slideInLeft 0.5s forwards;
}

.slide-in-right {
  animation: slideInRight 0.5s forwards;
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

// 触发左滑入
document.getElementById('element').classList.add('slide-in-left');

// 触发右滑入
document.getElementById('element').classList.add('slide-in-right');

使用GSAP动画库实现

GSAP提供更强大灵活的动画控制，适合复杂场景。

// 左滑入
gsap.from("#element", {duration: 0.5, x: "-100%"});

// 右滑入
gsap.from("#element", {duration: 0.5, x: "100%"});

原生JavaScript实现

通过requestAnimationFrame实现平滑动画效果，手动控制元素位置变化。

function slideIn(element, from, duration = 500) {
  const start = performance.now();
  const isLeft = from === 'left';
  const distance = isLeft ? -element.offsetWidth : element.offsetWidth;

  function animate(time) {
    const elapsed = time - start;
    const progress = Math.min(elapsed / duration, 1);
    const translateX = isLeft 
      ? distance + progress * -distance 
      : distance - progress * distance;

    element.style.transform = `translateX(${translateX}px)`;

    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

// 使用示例
const box = document.getElementById('box');
slideIn(box, 'left');  // 左滑入
slideIn(box, 'right'); // 右滑入

使用Web Animations API

现代浏览器支持的Web Animations API提供更高效的动画实现方式。

// 左滑入
document.getElementById('element').animate(
  [
    { transform: 'translateX(-100%)' },
    { transform: 'translateX(0)' }
  ],
  { duration: 500, fill: 'forwards' }
);

// 右滑入
document.getElementById('element').animate(
  [
    { transform: 'translateX(100%)' },
    { transform: 'translateX(0)' }
  ],
  { duration: 500, fill: 'forwards' }
);

响应式滑入效果

结合Intersection Observer API实现滚动到视口时触发滑入动画。

js实现左右滑入

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('slide-in-left');
      observer.unobserve(entry.target);
    }
  });
}, {threshold: 0.1});

document.querySelectorAll('.slide-element').forEach(el => {
  observer.observe(el);
});

以上方法可以根据项目需求选择适合的实现方式，CSS动画适合简单场景，GSAP适合复杂动画，原生JavaScript实现提供最大控制权，Web Animations API则提供了现代浏览器的性能优势。