API加载后如何使用反应过渡组？

Question

1. 当页面加载时，我正在显示一个骨架加载器。
2. 当我的 API 完成获取后，骨架会从 DOM 中移除
3. 内容已添加到 DOM。

我想在骨架消失时淡出，在内容进入时淡入。

为此，我使用了带有 CSSTransition 组件的 react-transition-group。

到目前为止，这是我的代码的简化版本，请原谅我缺少 codepen，因为复制和模仿 API 加载/就绪状态对我来说非常乏味：

Homepage.tsx：

function HomePage() {
 
  const { data: dataAPI, error } = useAPI1();
  const { data: dataAPI2, error: error2 } = useAPI2();
  
  if (!dataAPI || !dataAPI2) return <SkeletonLoader isLoading={!dataAPI && !dataAPI2} />;

  if (error) return <Error customMessage="Error from API1" />;
  if (error2) return <Error customMessage="Error from API2" />;

  return (
    <>
      <p>My content !</p>
    </>
  );
}

export default HomePage;

SkeletonLoader.tsx

const SkeletonLoader = ({ isLoading }: { isLoading: boolean }) => {
  const nodeRef = useRef(null);
  return (
    <CSSTransition timeout={1000} classNames="skeleton" in={!isLoading} nodeRef={nodeRef}>
      <Layout>
        <div className={styles.skeleton} ref={nodeRef}>
          <div className={styles.img} />
          <div className={styles.line} />
          <SkeletonProduct />
          <SkeletonProduct />
          <SkeletonProduct />
        </div>
      </Layout>
    </CSSTransition>
  );
};

export default SkeletonLoader;

global.scss

.skeleton-enter {
  opacity: 0;
}

.skeleton-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1000ms;
}

.skeleton-exit {
  opacity: 1;
}

.skeleton-exit-active {
  opacity: 0;
  transition: opacity 1000ms;
}

我尝试了不同的方法，但是当从 DOM 中移除骨架时，我看不到淡出。

感谢您的帮助。

Answer 1

您在过渡组有时间播放动画之前卸载它。

  if (!dataAPI || !dataAPI2) return <SkeletonLoader isLoading={!dataAPI && !dataAPI2} />;

将停止渲染您的过渡组。

您可以尝试始终渲染过渡组，并使用 'unmountOnExit` 属性将其自行卸载：

function HomePage() {
  const { data: dataAPI, error } = useAPI1();
  const { data: dataAPI2, error: error2 } = useAPI2();
  
  const isLoading =  (!dataAPI || !dataAPI2) 
  const shouldRenderContent = !error && !error2 && !isLoading;

  return (
    <>
      { error && <Error customMessage="Error from API1" /> }
      { error2 && <Error customMessage="Error from API2" /> }
      { isLoading && <SkeletonLoader isLoading={isLoading} />}     
      {shouldRenderContent && <p>My content !</p> }
    </>
  );
}

export default HomePage;

....
    <CSSTransition 
       unmountOnExit  // <-- this will remove the children when 'exit' ran.
       timeout={1000}
       classNames="skeleton"
       in={!isLoading}
       nodeRef={nodeRef}
       >
.....

Code sandbox api 调用被简单的按钮切换替换