如何淡出一个反应组件，然后淡入另一个？

Question

我有 2 个组件根据 useState 中存储为 showModal 的字符串值有条件地显示或隐藏

{showModal === 'SIGNIN' && <SignIn />}
{showModal === 'JOIN' && <Join />}

我想淡入一个组件，然后当状态发生变化时，将其淡出并淡入另一个组件。

这可以用react transition group 完成吗？

我试过了

<TransitionGroup>
    <CSSTransition in={showModal === 'SIGNIN' ? true : false} classNames='fade' timeout={220} key={showModal}>
       <div> 
          <SignIn />
       </div>
     </CSSTransition>
     <CSSTransition in={showModal === 'JOIN' ? true : false} classNames='fade' timeout={220} key={showModal}>
       <div> 
         <Join />
       </div>
     </CSSTransition>
</TransitionGroup>

我没有收到任何错误，显示了一个组件，将 showModal 从“SIGNIN”更改为“JOIN”没有任何作用。检查超时设置为 22000 的 div 表明没有添加任何新类。

Answer 1

来自react transition group 的SwitchTransition 可能会有所帮助。

示例

const { useState, useEffect } = React;
const { SwitchTransition, CSSTransition } = ReactTransitionGroup;

const SignIn = () => <div className="block sign-in">Sign In</div>;

const Join = () => <div className="block join">Join</div>;

const App = () => {
const [showModal, setModal] = useState("SIGNIN");

  useEffect(() => {
      let handle;
      
      const loop = () => {
      
        setModal(state => state === "JOIN" ? "SIGNIN" : "JOIN");
      
        handle = setTimeout(loop, 2500);
      };
  
      handle = setTimeout(loop, 1000);
      
      return () => {
        clearTimeout(handle);
      }
  }, []);
  
  const addEndListener = (node, done) => {
              node.addEventListener("transitionend", done, false);
            }

return <div>
  <SwitchTransition mode="out-in">
    <CSSTransition
      key={showModal === "SIGNIN"}
      addEndListener={addEndListener}
      classNames="fade">
        {showModal === "SIGNIN" ? <SignIn/> : <Join/>}
  </CSSTransition>
</SwitchTransition>
</div>;
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

body {
  margin: 0;
  overflow: hidden;
  font-family: Georgia, serif;
}

.block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  color: white;
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.sign-in { 
  background: #0984e3;
}

.join {
  background: #6c5ce7;
}

.fade-enter {
   opacity: 0;
    transform: translate(-100%, -50%);
}

.fade-exit {
   opacity: 1;
   transform: translate(-50%, -50%);
}

.fade-enter-active {
   opacity: 1;
   transform: translate(-50%, -50%);
}

.fade-exit-active {
   opacity: 0;
   transform: translate(100%, -50%);
}

.fade-enter-active,
.fade-exit-active {
   transition: opacity 500ms, transform 500ms;
}

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-transition-group@4.4.2
/dist/react-transition-group.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>