如何使用react-transition-group在父组件渲染后延迟动画显示子组件？

嘿，我来帮你搞定这个向上滑动的动画效果！你的问题核心是还没给<CSSTransition>配置对应的CSS类，而且如果要延迟触发动画，直接设in={true}是不够的——咱们一步步来解决：

第一步：修正React组件代码 #

首先，React Transition Group v2+已经不再使用transitionName属性，只用classNames就够了。另外，要实现延迟显示，我们需要用状态来控制in属性，在父组件挂载后延迟切换状态触发动画：

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

function ParentComponent() {
  // 初始隐藏子组件
  const [showIndicator, setShowIndicator] = useState(false);

  // 父组件挂载完成后，延迟1秒触发动画（可自行调整延迟时间）
  useEffect(() => {
    const delayTimer = setTimeout(() => {
      setShowIndicator(true);
    }, 1000);
    // 组件卸载时清理定时器，避免内存泄漏
    return () => clearTimeout(delayTimer);
  }, []);

  return (
    <div className="parent-wrapper">
      <CSSTransition
        in={showIndicator}
        timeout={500} // 这个时长要和CSS动画时长完全匹配
        classNames="slide-up" // CSS类的前缀，和下面的样式对应
        unmountOnExit // 可选：动画结束后自动卸载子组件，不需要可删除
      >
        <Indicator />
      </CSSTransition>
    </div>
  );
}

// 你的子组件示例
function Indicator() {
  return <div className="indicator-content">我是要滑上来的子组件</div>;
}

第二步：编写对应的CSS动画样式 #

<CSSTransition>会根据你设置的classNames前缀，自动生成4个状态类：slide-up-enter（进入初始态）、slide-up-enter-active（进入动画态）、slide-up-exit（退出初始态）、slide-up-exit-active（退出动画态）。我们只需要给这些类写样式，就能实现向上滑动效果：

/* 进入前的初始状态：子组件在下方20px处，完全透明 */
.slide-up-enter {
  transform: translateY(20px);
  opacity: 0;
}

/* 进入动画的过渡状态：平滑回到原位并显示 */
.slide-up-enter-active {
  transform: translateY(0);
  opacity: 1;
  transition: transform 500ms ease-out, opacity 500ms ease-out;
}

/* 如果需要退出动画（比如隐藏子组件时的效果），可以保留下面两个类 */
.slide-up-exit {
  transform: translateY(0);
  opacity: 1;
}

.slide-up-exit-active {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 500ms ease-out, opacity 500ms ease-out;
}

关键注意点 #

• 延迟触发的实现：通过useEffect加setTimeout，在父组件挂载后延迟切换showIndicator状态，这样动画就会在你设定的延迟后开始。
• timeout与CSS时长匹配：CSSTransition的timeout必须和CSS中transition的时长一致，否则React会提前结束动画状态，导致效果异常。
• 自定义动画：你可以修改translateY的数值调整滑动距离，或者换成translateX实现左右滑动，也可以添加其他过渡属性（比如scale实现缩放）。

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