此问题已在此处有答案：

Transitions on the CSS display property（38回答）
21小时前关闭
我尝试了很多次添加一个过渡到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;
}

我试着在100毫秒后设置ShowDropDown，每次点击标题div，也试着在过渡中使用高度而不是所有，但没有任何效果