无需库实现进入和退出动画

当您使用 {show && } 进行条件渲染时，show 一旦变为 false，React 就会立即从 DOM 中移除元素。由于节点已经消失，没有时间播放退出动画。

进入动画很容易处理；真正的难点是退出动画。

最简单的修复方法是永不卸载元素。让元素始终保持渲染状态，并在隐藏时将 opacity 动画设为零，同时设置 pointer-events: none；显示时再将其恢复为 1。

这样可以在两个方向上实现平滑淡化，但代价是元素会一直留在 DOM 中。

如果需要真正卸载，您可以使用包含 mounting、mounted、unmounting 和 unmounted 等阶段的小型状态机进行建模。只有在退出动画完成后，您才会移除节点。

状态会决定每个阶段应用哪些动画类名。

您可以将这套状态机封装在一个自定义钩子中，通常称为 useMount。它接收期望的可见性，并返回元素是否应存在于 DOM 中以及当前阶段。

由于时序逻辑位于可复用的钩子中，组件可以保持简洁。

按照常见约定，挂载时依次应用 enter 和 enter-active，移除时依次应用 exit 和 exit-active。基础类设置起始状态，活动类则通过过渡设置结束状态。

在正确的帧之间切换这两个类，就能产生动画。

若要知道退出动画何时结束，请监听元素上的 transitionend 事件。当退出动画触发该事件时，将状态切换为 unmounted 并移除节点。

这样可以将卸载准确地绑定到视觉动画的结束时刻，而不是依赖猜测的超时时间。

您可以将所有这些逻辑封装在一个 Transition 组件中，让它接收一个 in 属性和子元素。它会在子元素播放退出动画期间保持其挂载状态，并根据每个阶段应用正确的类名。

使用方只需切换 in，就能自动获得正确的进入和退出动效。

有一个细节需要注意：您必须先让浏览器绘制起始类，然后再添加活动类，否则元素会直接跳变而不会产生过渡。在两者之间使用 requestAnimationFrame 或强制回流，可以确保过渡真正运行。

这样可以确保浏览器先记录起始值。

react-transition-group 库提供了 Transition 和 CSSTransition 组件，实现了这一完整模式，包括类名生命周期和卸载时序。

您的 DIY 版本体现了它的核心思想，因此在亲自构建过一个之后，就会很容易理解这个库。

对于单个简单的淡入淡出效果，保持挂载的方案或一个小型钩子就足够了，还可以避免引入依赖。对于多个协调过渡、包含添加和移除操作的列表，或复杂的时序编排，使用库可以节省时间并减少边界情况错误。

请根据应用实际需要的动画复杂度来选择方案。

退出动画要求元素一直存在，直到动画完成；您可以选择永不卸载、使用状态机配合 transitionend，或使用库来实现。

理解其中的机制后，您就能选择满足需求的最轻量方案。

您了解了退出动画难以实现的原因、两种解决方案（保持挂载和挂载状态机）、transitionend 如何控制卸载时机，以及如何构建可复用的 Transition 组件。

您还了解了何时应使用 react-transition-group，而不是 DIY 实现。