如何使用react-transition-group实现前进后退对应不同方向的滑动切换

你当前的代码固定了所有进入动画的初始位移为translateX(100%)，也就是新页面永远从右侧进入，没有区分前进、返回两种场景的动画逻辑，同时原有退出动画的初始位移配置也存在错误，所以会出现方向一致的问题。

1. 新增滑动方向状态 #

在你的步骤组件中新增状态记录滑动方向，点击下一步时标记为前进方向，点击返回时标记为后退方向：

import { useState } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';

function Onboarding() {
  const [step, setStep] = useState(1);
  // 新增方向状态，可选值 forward/backward
  const [slideDirection, setSlideDirection] = useState('forward');

  const nextStep = () => {
    setSlideDirection('forward');
    setStep(prev => prev + 1);
  };

  const prevStep = () => {
    setSlideDirection('backward');
    setStep(prev => prev - 1);
  };

  // 其他业务逻辑省略
}

2. 动态绑定CSSTransition的类名前缀 #

根据滑动方向动态切换动画类名的前缀，不要使用固定的step前缀：

<TransitionGroup>
  <CSSTransition
    key={step}
    timeout={1000}
    // 动态类名前缀
    classNames={`step-${slideDirection}`}
  >
    <div className="onboarding-screen">
      {/* 当前步骤内容 */}
      <button onClick={prevStep}>返回</button>
      <button onClick={nextStep}>下一步</button>
    </div>
  </CSSTransition>
</TransitionGroup>

3. 补充两套方向的样式 #

分别编写前进、后退场景的进入、退出动画，修正原有退出动画的初始位移错误：

.onboarding-screen
    display flex
    flex-direction column
    flex-grow 1
    position absolute
    width 100%
    height 100%
    align-items center

    /* 前进场景：新页面右进，旧页面左出 */
    &.step-forward-enter
        transform translateX(100%)
        transition(all 1s)
    &.step-forward-enter-active
        transform translateX(0%)
        transition(all 1s)
    &.step-forward-enter-done
        position relative
    &.step-forward-exit
        transform translateX(0%)
        transition(all 1s)
    &.step-forward-exit-active
        transform translateX(-100%)
        transition(all 1s)
    &.step-forward-exit-done
        position relative

    /* 后退场景：新页面左进，旧页面右出 */
    &.step-backward-enter
        transform translateX(-100%)
        transition(all 1s)
    &.step-backward-enter-active
        transform translateX(0%)
        transition(all 1s)
    &.step-backward-enter-done
        position relative
    &.step-backward-exit
        transform translateX(0%)
        transition(all 1s)
    &.step-backward-exit-active
        transform translateX(100%)
        transition(all 1s)
    &.step-backward-exit-done
        position relative

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