如何在React条件渲染后实现CSS ease-in过渡效果？

直接用React的条件渲染（&&）切换元素的话，元素会被直接卸载/挂载，没法触发CSS过渡——因为过渡需要元素在DOM中存在，通过属性变化来触发。你需要调整结构和CSS来实现效果：

1. 调整React代码结构 #

把两个内容容器都保留在DOM中，通过状态控制它们的显示类，而不是直接移除：

<div className="content-container">
  {/* 项目列表容器 */}
  <div className={`test ${this.state.showProjects ? 'visible' : 'hidden'}`}>
    {this.state.projects && this.state.projects.map((project) => (
      <ProjectDetails key={project._id} project={project}/>
    ))}
  </div>
  {/* 初始提示容器 */}
  <div className={`initial-screen ${!this.state.showProjects ? 'visible' : 'hidden'}`}> 
    Enter filter options to get started!
  </div>
</div>

2. 添加CSS过渡样式 #

通过transition属性定义过渡效果，ease-in作为缓动函数，控制透明度、可见性（可选高度）的平滑变化：

/* 基础样式：默认隐藏状态 */
.test, .initial-screen {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  /* 定义过渡属性、时长和缓动函数 */
  transition: opacity 0.3s ease-in, visibility 0.3s ease-in, max-height 0.3s ease-in;
}

/* 显示状态 */
.test.visible, .initial-screen.visible {
  opacity: 1;
  visibility: visible;
  max-height: 2000px; /* 设一个足够容纳内容的最大值，避免高度跳变 */
}

关键说明 #

• opacity控制透明度，visibility确保元素隐藏时无法交互，max-height解决内容高度变化的过渡（如果不需要高度变化可以去掉）
• ease-in是过渡的缓动函数，作用是让动画开始慢、后期加速，你可以把0.3s改成需要的过渡时长（比如0.5s）
• 不要用display: none，因为它会直接移除元素的布局，无法触发过渡

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