javascript - 无法使用 css 过渡

Question

使用下面的代码我可以进行转换，但有两个问题

1. 过渡的方向似乎比我定义的方向错误(从右到左而不是从左到右)。
2. 它应该在新小部件进入时转换旧小部件，但它会立即用新小部件替换旧小部件，然后转换开始。
3. 通过将 .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 {
    
  }

Answer 1

通过查看react-transition-group documentation ，我猜测问题的发生是因为 fade-enter 和 fade-exit 的转换起点未定义。而且您提供的 fadeEnterActive 和 fadeExitActive 的样式似乎方向相反。

这段代码应该可以工作。

react 片段

    <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,
            enter: styles.fadeEnter,
            exitActive: styles.fadeExitActive,
            exit: styles.fadeExit
          }}
      >
        <div ref={nodeRef()}  className={['w-full h-full', styles.fade].join(' ')}>
          {getWidget()}
        </div>
      </CSSTransition>
    </SwitchTransition>

样式

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