如何实现点击右侧列表项时的背景图片CSS动画效果？

需求概述 #

初始时背景图片完全隐藏在屏幕右侧，不占用页面可视空间；点击右侧的Man、Woman等列表项时，对应背景图片平滑从右侧滑入显示；切换列表项时，当前背景图滑出，新背景图滑入。

当前状态示意 #

• 点击前：页面右侧显示列表项，左侧无背景图
• 点击后：左侧显示对应背景图，右侧列表项保持显示

优化实现方案 #

1. 调整CSS代码（解决原有动画冲突+隐藏溢出问题） #

原有代码混用transition和animation，且未处理父容器溢出，易出现滚动条或动画异常。以下是优化后的代码：

/* 父容器必须设置：相对定位+隐藏溢出，确保背景图在容器内滑动 */
.slider-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 400px; /* 根据实际布局设置高度 */
}

img.slider__bg {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，填充容器 */
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(100%); /* 初始状态：完全滑出到右侧 */
  transition: transform 0.5s ease; /* 统一用transition实现平滑过渡 */
  z-index: 0; /* 确保背景图在列表下方不遮挡内容 */
}

/* 显示状态：滑入到可视区域 */
img.slider__bg.showBg {
  transform: translateX(0);
}

/* 隐藏状态：滑出到右侧 */
img.slider__bg.hideBg {
  transform: translateX(100%);
}

2. 添加JS交互逻辑（实现点击切换动画） #

给列表项绑定点击事件，控制背景图的显示/隐藏切换：

// 获取列表项和所有背景图元素
const listItems = document.querySelectorAll('.list-item');
const bgImages = document.querySelectorAll('.slider__bg');

listItems.forEach((item, idx) => {
  item.addEventListener('click', () => {
    // 先让所有背景图滑出
    bgImages.forEach(img => {
      img.classList.remove('showBg');
      img.classList.add('hideBg');
    });
    // 等待当前动画结束后，显示对应背景图
    setTimeout(() => {
      bgImages[idx].classList.remove('hideBg');
      bgImages[idx].classList.add('showBg');
    }, 500); // 延迟时间与动画时长一致
  });
});

核心优化说明 #

• 父容器overflow: hidden：彻底隐藏超出容器的背景图，避免出现横向滚动条，保证隐藏时不改变页面尺寸
• 用transition替代animation：状态切换类动画用transition更简洁，避免动画定义冗余
• object-fit: cover：保证背景图在容器内正确显示，不会拉伸变形
• 父容器相对定位：让绝对定位的背景图相对于容器定位，避免脱离布局流

内容的提问来源于stack exchange，提问作者Madara uchi