当前位置：首页 > JavaScript

js 实现滑动

2026-04-06 16:34:27JavaScript

实现滑动效果的方法

在JavaScript中实现滑动效果可以通过多种方式完成，以下是几种常见的实现方法：

使用CSS过渡和JavaScript触发

通过CSS定义过渡效果，再使用JavaScript添加或移除类名来触发滑动动画。这种方法简单且性能较好。

js 实现滑动

.slide-element {
  transition: transform 0.3s ease;
}
.slide-out {
  transform: translateX(100%);
}

const element = document.querySelector('.slide-element');
element.classList.add('slide-out'); // 触发滑动

使用requestAnimationFrame实现自定义动画

对于需要更精细控制的滑动效果，可以使用requestAnimationFrame手动实现动画。

function slide(element, distance, duration) {
  const start = performance.now();
  const initialPosition = element.getBoundingClientRect().left;

  function animate(time) {
    const elapsed = time - start;
    const progress = Math.min(elapsed / duration, 1);
    element.style.transform = `translateX(${initialPosition + distance * progress}px)`;

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

  requestAnimationFrame(animate);
}

使用Web Animations API

现代浏览器支持Web Animations API，可以直接用JavaScript创建复杂的动画效果。

js 实现滑动

const element = document.querySelector('.slide-element');
element.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(100px)' }
], {
  duration: 300,
  easing: 'ease-in-out'
});

使用第三方库

如果需要更复杂的效果或跨浏览器兼容性，可以考虑使用动画库如GSAP或anime.js。

// 使用GSAP示例
gsap.to('.slide-element', {
  x: 100,
  duration: 0.3,
  ease: "power1.out"
});

注意事项

移动端触摸滑动需要处理touchstart、touchmove和touchend事件
性能优化：尽量使用CSS硬件加速（如transform和opacity）
滑动结束后可能需要触发回调函数或状态更新

完整示例代码

以下是一个完整的滑动面板实现示例：

<style>
  .slider {
    width: 300px;
    height: 200px;
    background: #eee;
    position: relative;
    overflow: hidden;
  }
  .slide-content {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
  }
</style>

<div class="slider">
  <div class="slide-content">滑动内容</div>
</div>

<script>
  const content = document.querySelector('.slide-content');
  let isOpen = false;

  function toggleSlide() {
    isOpen = !isOpen;
    content.style.transform = isOpen 
      ? 'translateX(100%)' 
      : 'translateX(0)';
  }

  // 调用toggleSlide()来触发滑动
</script>

标签: js