React Transition Group：CSSTransition入场生效但退场无过渡效果求助

我来帮你定位这个退场过渡直接消失的问题！结合你给出的代码，大概率是几个配置细节出了问题，咱们一步步拆解：

核心问题：key值设置错误 #

你给CSSTransition设置的key={list}，这里的list是布尔值（true/false）。当你触发退场（list从true变为false）时，React会因为key值变化，直接把旧组件卸载并渲染新的（其实是状态为false的组件），完全跳过了CSSTransition的退场动画流程——这是最可能导致过渡失效的原因！

次要问题：timeout值不匹配 #

你的timeout设成了500000（足足500秒），而CSS里的过渡时长只有0.5秒。虽然超大的timeout不会直接导致过渡失效，但会让组件在退场动画结束后，还会等待很久才被卸载，同时也显得不严谨，建议和CSS过渡时长保持一致。

解决方案 #

1. 修正key值 #

把key改成一个稳定不变的标识，比如固定字符串，确保组件在显示/隐藏切换时，React识别为同一个组件，从而触发退场动画：

<CSSTransition
  classNames="transition"
  // 改用固定key
  key="country-list-sidebar"
  in={list}
  unmountOnExit
  appear
  // 用对象形式明确enter/exit的超时时间，和CSS过渡匹配
  timeout={{ enter: 500, exit: 500 }}
>

2. 验证CSS样式优先级 #

检查你的.transition-exit和.transition-exit-active样式有没有被其他更高优先级的样式覆盖（比如内联样式、更具体的选择器）。可以在浏览器开发者工具里查看元素的computed样式，确认opacity的过渡属性是否正确应用。

3. 确认状态更新逻辑 #

确保handleList函数确实是把父组件的list状态从true改为false，没有直接执行卸载组件的操作——状态的正确切换是触发退场动画的前提。

测试修改后的效果 #

调整完key和timeout后，再触发退场操作，组件应该会按照CSS定义的0.5秒从opacity:1过渡到opacity:0，之后才会被卸载。

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