为什么我的 CSS 转换在 React 18 中不起作用

我多次try 向EventBody添加过渡，但仍然不起作用.

**代码如下:

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

  return (
    <div className={styles.eventContainer}>
      <div
        className={styles.eventHeader}
        onClick={() => setShowDropDown(!showDropDown)}
        role='button'
      >
        <div className={styles.eventInfo}>
          <div className={styles.eventTitle}>{event.title}</div>
          <div className={styles.eventTime}>{event.time}</div>
          <div className={styles.eventLocation}>{event.location}</div>
        </div>

        <div className={styles.chevronContainer}>
          <Icon
            name={IconName.chevron}
            iconProps={{
              className: `${styles.chevron} ${showDropDown ? styles.openedChevron : ''}`,
              alt: 'Chevron icon',
            }}
          />
        </div>
      </div>
      <div className={styles.eventBody} hidden={!showDropDown}>
        <div className={styles.line}></div>
        <AttendeeList upcoming={true} attenders={attenders}></AttendeeList>
      </div>
    </div>
  )
}

**css:

.eventBody {
  transition: all 0.4s ease-out;
}

.eventBody[hidden='true'] {
  display: none;
}

我试着在每次点击标题div后100毫秒后设置ShowDropDown，也try 在过渡中使用高度，而不是所有但都不起作用