React 18中CSS Transition无法生效的问题求助

你的过渡动画失效的核心原因是：CSS过渡不支持display属性的变化，而你通过hidden属性触发的display: none会直接让元素从渲染树中消失，过渡动画根本没有执行的机会。

修复步骤 #

1. 移除hidden属性，改用CSS类控制显示状态
2. 使用max-height/opacity/overflow这些可过渡的属性替代display: none

修改后的组件代码 #

export function Event({ event }: EventProps) {
  const [showDropDown, setShowDropDown] = useState(false)

  return (
      <div className={`${styles.eventBody} ${!showDropDown ? styles.isHidden : ''}`}>
        <div className={styles.line}></div>
        <AttendeeList upcoming={true} attenders={attenders}></AttendeeList>
     </div>
  )
}

修改后的CSS代码 #

如果内容高度不固定，用max-height模拟过渡（设一个比实际内容高度大的值即可）：

.eventBody {
  max-height: 600px; /* 按需调整，确保大于内容实际高度 */
  opacity: 1;
  overflow: hidden;
  transition: all 0.4s ease-out;
}

.eventBody.isHidden {
  max-height: 0;
  opacity: 0;
}

如果内容高度固定，可直接使用height：

.eventBody {
  height: 250px; /* 内容实际高度 */
  opacity: 1;
  overflow: hidden;
  transition: all 0.4s ease-out;
}

.eventBody.isHidden {
  height: 0;
  opacity: 0;
}

原理说明 #

• max-height: 0配合overflow: hidden能隐藏内容，同时支持过渡动画
• opacity控制淡入淡出效果，让过渡更自然
• 避免使用display: none，因为它会直接终止元素的渲染，过渡动画无法触发

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