bounty将在3天后过期。回答此问题可获得+50声望奖励。bihire boris希望吸引更多人关注此问题。

下面的代码我可以有一个过渡，但两个问题
1.过渡似乎比我定义的方向走错了（从右到左而不是从左到右）。
1.它应该在新的小部件进入时转换旧的小部件，但它会立即用新的小部件替换旧的小部件，然后转换开始。
1.通过将.fadeEnterActive替换为.fadeExitActive，我修复了第二个问题。但是由于某些原因，输入元素现在以.fadeEnterDone className开头。
能发现问题吗？
如何修复

import { useRef, useState } from "react";
import { SwitchTransition, CSSTransition } from "react-transition-group";
import PayContainer from "../payContainer";
import PersonalInfoForm from "../persnalInfoForm";
import styles from './drawer_container.module.scss'

export default function DrawerContainer() {
    const [state, setState] = useState('pay-fill');
    const payRef = useRef(null);
    const personalInfoRef = useRef(null);
    const previewRef = useRef(null);
    const nodeRef = () => {
        switch (state) {
            case 'pay-fill':
                return payRef
            case 'personalinfo-fill':
                return personalInfoRef
            case 'preview':
                return previewRef
            default:
                return null;
        }
    }

    const setActiveState = (curState: string) => {
        setState(curState)
    }

    const getWidget = () => {
        switch (state) {
            case 'pay-fill':
                return <PayContainer setState={setActiveState}/>
            case 'personalinfo-fill':
                return <PersonalInfoForm />
            case 'preview':
                    return <div>preview nigga</div>
            default:
                return <div>default</div>;
        }
    }
    return <div className="w-full h-full">
    <SwitchTransition mode={'out-in'}>
      <CSSTransition
        key={state}
        nodeRef={nodeRef()}
        addEndListener={(done: () => void) => {
          nodeRef()?.current?.addEventListener("transitionend", done, false);
        }}
        // in={focus}
        timeout={500}
        classNames={{
            enterActive: styles.fadeEnterActive,
            enterDone: styles.fadeEnterDone,
            exitActive: styles.fadeExitActive,
            exitDone: styles.fadeExitDone
          }}
      >
        <div ref={nodeRef()}  className={['w-full h-full', styles.fade].join(' ')}>
          {getWidget()}
        </div>
      </CSSTransition>
    </SwitchTransition>
  </div>;
}

样式

.fadeEnterActive {
    opacity: 0;
    transform: translateX(-100%);
  }
  .fadeEnterDone {
    opacity: 1;
    transform: translateX(0%);
  }
  .fadeExitActive {
    opacity: 1;
    transform: translateX(0%);
  }
  .fadeExitDone {
    opacity: 0;
    transform: translateX(100%);
  }
  .fadeEnterActive,
  .fadeExitActive {
    transition: opacity 500ms, transform 500ms;
  }

  .fade {
    
  }