当前位置：首页 > JavaScript

js实现滑进滑出效果

2026-03-01 16:11:37JavaScript

滑进滑出效果的实现方法

使用JavaScript结合CSS可以实现元素的滑进滑出效果。以下是几种常见的方法：

使用CSS过渡和JavaScript触发

通过CSS定义过渡效果，JavaScript控制类名的切换来实现动画。

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

.slide-in {
  transform: translateX(0);
  opacity: 1;
}

.slide-out {
  transform: translateX(100%);
  opacity: 0;
}

const element = document.querySelector('.slide-element');

// 滑入效果
function slideIn() {
  element.classList.remove('slide-out');
  element.classList.add('slide-in');
}

// 滑出效果
function slideOut() {
  element.classList.remove('slide-in');
  element.classList.add('slide-out');
}

使用Web Animations API

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

const element = document.querySelector('.slide-element');

function slideIn() {
  element.animate([
    { transform: 'translateX(-100%)', opacity: 0 },
    { transform: 'translateX(0)', opacity: 1 }
  ], {
    duration: 300,
    easing: 'ease'
  });
}

function slideOut() {
  element.animate([
    { transform: 'translateX(0)', opacity: 1 },
    { transform: 'translateX(100%)', opacity: 0 }
  ], {
    duration: 300,
    easing: 'ease'
  });
}

使用jQuery实现

如果项目中使用了jQuery，可以简化动画的实现。

// 滑入
$('.slide-element').animate({
  left: '0',
  opacity: 1
}, 300);

// 滑出
$('.slide-element').animate({
  left: '100%',
  opacity: 0
}, 300);

使用CSS动画关键帧

通过定义关键帧动画，JavaScript控制动画的播放。

js实现滑进滑出效果

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

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.slide-in {
  animation: slideIn 0.3s forwards;
}

.slide-out {
  animation: slideOut 0.3s forwards;
}

const element = document.querySelector('.slide-element');

function toggleSlide() {
  if (element.classList.contains('slide-in')) {
    element.classList.remove('slide-in');
    element.classList.add('slide-out');
  } else {
    element.classList.remove('slide-out');
    element.classList.add('slide-in');
  }
}