React CSSTransition过渡效果异常问题求助

问题根源 #

你的代码核心问题是CSSTransition的classNames前缀与CSS类名不匹配，导致过渡类未被正确应用：

• 你在Tab.js中给CSSTransition设置了classNames="dropdown"，意味着所有过渡类都会自动加上dropdown-前缀（比如dropdown-enter、dropdown-enter-active）
• 但你在dropdown.css中定义的类却是不带前缀的.enter、.enter-active，这些类根本不会被React添加到元素上，自然无法触发正确过渡

另外，关闭时无动画的原因是exit阶段的类同样不匹配，元素直接被卸载，看不到过渡效果。

修复步骤 #

1. 修正CSS类名，匹配classNames前缀 #

修改src/components/Dropdown/dropdown.css中的所有过渡类，加上dropdown-前缀：

.dropdown-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #eee;
  /* 保留过渡属性，让所有opacity变化都有动画 */
  transition: opacity 0.3s ease;
}

/* 进入阶段初始状态 */
.dropdown-enter {
  opacity: 0;
}

/* 进入阶段激活状态 */
.dropdown-enter-active {
  opacity: 1;
}

/* 进入完成状态 */
.dropdown-enter-done {
  opacity: 1;
}

/* 退出阶段初始状态 */
.dropdown-exit {
  opacity: 1;
}

/* 退出阶段激活状态 */
.dropdown-exit-active {
  opacity: 0;
}

/* 退出完成状态 */
.dropdown-exit-done {
  opacity: 0;
}

2. 确保CSSTransition的timeout与过渡时长一致 #

你的CSS过渡时长是0.3s，所以Tab.js中的CSSTransition的timeout要保持一致（当前设置为300，符合要求）：

<CSSTransition
  in={isDropdownOpen}
  timeout={300} // 和CSS的0.3s对应
  unmountOnExit
  classNames="dropdown"
>
  <Dropdown />
</CSSTransition>

3. 可选：优化初始渲染闪烁问题 #

如果打开时仍有轻微闪烁，可以给.dropdown-wrapper默认设置opacity: 0，然后通过dropdown-enter-done保持显示状态，避免初始渲染时的视觉跳动。

为什么示例无需主类transition也能工作？ #

你提到的示例中，过渡属性是直接定义在enter-active和exit-active类里的，比如：

.fade-enter-active {
  transition: opacity 500ms ease-in;
}
.fade-exit-active {
  transition: opacity 500ms ease-in;
}

这种方式也能生效，但把过渡属性放在基础类（比如.dropdown-wrapper）里更简洁，所有状态变化都能复用同一个过渡规则。

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