基于React/Redux的图片灯箱导航滑动动画实现求助

嘿，我来帮你搞定这个灯箱的滑动动画！基于你给出的现有代码，我给你两种实用的实现思路，都是实际项目里常用的方案，你可以根据需求选择：

一、先梳理必要的状态逻辑（前提准备） #

你的现有代码里，Lightbox组件需要明确当前显示的图片索引，以及切换时的前后状态，才能触发正确的动画方向。所以先调整你的Redux状态和逻辑：

1. 更新Redux Action #

// actions.js
export const openLightbox = (index) => ({
  type: 'OPEN_LIGHTBOX',
  payload: index
});

export const nextImage = () => ({
  type: 'NEXT_IMAGE'
});

export const prevImage = () => ({
  type: 'PREV_IMAGE'
});

export const closeLightbox = () => ({
  type: 'CLOSE_LIGHTBOX'
});

2. 更新Redux Reducer #

// reducer.js
const initialState = {
  showLightbox: false,
  currentIndex: 0,
  prevIndex: 0,
  images: [] // 把你的IMAGES数组放到Redux状态里，方便组件共享
};

const lightboxReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'OPEN_LIGHTBOX':
      return {
        ...state,
        showLightbox: true,
        currentIndex: action.payload,
        prevIndex: action.payload
      };
    case 'NEXT_IMAGE':
      return {
        ...state,
        prevIndex: state.currentIndex,
        currentIndex: (state.currentIndex + 1) % state.images.length
      };
    case 'PREV_IMAGE':
      return {
        ...state,
        prevIndex: state.currentIndex,
        currentIndex: state.currentIndex === 0 ? state.images.length - 1 : state.currentIndex - 1
      };
    case 'CLOSE_LIGHTBOX':
      return { ...initialState };
    default:
      return state;
  }
};

二、方案1：纯CSS过渡动画（简单易上手） #

这种方案适合快速实现基础的左右滑动效果，不用额外安装依赖，纯靠CSS+React状态切换触发动画。

1. 修改Lightbox组件结构 #

// Lightbox.jsx
import React from 'react';
import { connect } from 'react-redux';
import { nextImage, prevImage, closeLightbox } from './actions';

class Lightbox extends React.Component {
  render() {
    const { images, currentIndex, prevIndex, showLightbox } = this.props;
    if (!showLightbox) return null;

    // 判断滑动方向：next是右→左，prev是左→右
    const isNextSlide = currentIndex > prevIndex || (prevIndex === images.length - 1 && currentIndex === 0);

    return (
      <div className="lightbox-overlay" onClick={this.props.closeLightbox}>
        <div className="lightbox-content" onClick={(e) => e.stopPropagation()}>
          {/* 导航按钮 */}
          <button className="lightbox-nav prev" onClick={this.props.prevImage}>←</button>
          <button className="lightbox-nav next" onClick={this.props.nextImage}>→</button>
          
          {/* 图片容器：包含当前和上一张图片，实现滑动切换 */}
          <div className="lightbox-image-container">
            <img 
              src={images[prevIndex]} 
              className={`lightbox-image ${isNextSlide ? 'slide-out-right' : 'slide-out-left'}`}
              alt="Previous image"
            />
            <img 
              src={images[currentIndex]} 
              className={`lightbox-image ${isNextSlide ? 'slide-in-left' : 'slide-in-right'}`}
              alt="Current image"
            />
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  images: state.lightbox.images,
  currentIndex: state.lightbox.currentIndex,
  prevIndex: state.lightbox.prevIndex,
  showLightbox: state.lightbox.showLightbox
});

export default connect(mapStateToProps, { nextImage, prevImage, closeLightbox })(Lightbox);

2. 添加CSS动画样式 #

.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-content {
  position: relative;
  width: 80%;
  max-width: 800px;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.6);
  border: none;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 10;
}

.lightbox-nav.prev { left: -40px; }
.lightbox-nav.next { right: -40px; }

.lightbox-image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16/9; /* 可根据你的图片比例调整 */
}

.lightbox-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease-in-out;
}

/* 向右滑动（上一张图片退出） */
.slide-out-right { transform: translateX(100%); }
/* 向左滑动（上一张图片退出） */
.slide-out-left { transform: translateX(-100%); }

/* 从左侧滑入（当前图片进入） */
.slide-in-left { transform: translateX(0); }
/* 从右侧滑入（当前图片进入） */
.slide-in-right { transform: translateX(0); }

三、方案2：使用React Transition Group（灵活可控） #

如果需要更复杂的动画组合（比如淡入淡出+滑动），或者更精细的动画生命周期控制，可以用官方推荐的react-transition-group库。

1. 安装依赖 #

npm install react-transition-group

2. 修改Lightbox组件 #

// Lightbox.jsx
import React from 'react';
import { connect } from 'react-redux';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { nextImage, prevImage, closeLightbox } from './actions';

class Lightbox extends React.Component {
  render() {
    const { images, currentIndex, showLightbox } = this.props;
    if (!showLightbox) return null;

    return (
      <div className="lightbox-overlay" onClick={this.props.closeLightbox}>
        <div className="lightbox-content" onClick={(e) => e.stopPropagation()}>
          <button className="lightbox-nav prev" onClick={this.props.prevImage}>←</button>
          <button className="lightbox-nav next" onClick={this.props.nextImage}>→</button>
          
          <TransitionGroup className="lightbox-image-container">
            <CSSTransition
              key={currentIndex}
              timeout={300}
              classNames="slide"
            >
              <img 
                src={images[currentIndex]} 
                className="lightbox-image"
                alt="Current image"
              />
            </CSSTransition>
          </TransitionGroup>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  images: state.lightbox.images,
  currentIndex: state.lightbox.currentIndex,
  showLightbox: state.lightbox.showLightbox
});

export default connect(mapStateToProps, { nextImage, prevImage, closeLightbox })(Lightbox);

3. 添加CSS动画样式 #

.lightbox-image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.lightbox-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
}

/* 进入动画：从右侧滑入 */
.slide-enter {
  transform: translateX(100%);
}

.slide-enter-active {
  transform: translateX(0);
  transition: transform 0.3s ease-in-out;
}

/* 退出动画：向左侧滑出 */
.slide-exit {
  transform: translateX(0);
}

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

四、额外优化建议 #

• 键盘导航：监听ArrowLeft和ArrowRight按键，实现键盘切换图片，提升用户体验
• 边界处理：确保第一张/最后一张图片循环切换时动画自然（方案1已经处理了这个逻辑）
• 加载状态：如果图片是远程资源，添加loading动画避免切换时出现空白
• 响应式适配：调整灯箱在移动端的尺寸和导航按钮位置

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