自定义React Hook封装Drawer组件后过渡动画失效的原因及解决方法咨询

大家好，我最近在React项目里遇到了一个棘手的问题，想请社区的朋友们帮忙分析下。

更新说明 #

这个问题已经解决啦，演示示例也同步更新了修正后的版本。感谢所有帮忙出主意的朋友们！

在线演示： CodeSandbox Demo

问题描述 #

我写了一个从底部向上滑入的Drawer组件（类似底部弹窗），直接使用的时候动画完全正常，能平滑地从底部滑上来。但当我把它封装到自定义Hook UseQRCodePopup里之后，过渡动画突然就失效了——抽屉直接瞬间出现，完全没有滑动的效果。我反复检查了CSS和状态管理逻辑，还是没找到问题的根源。

复现步骤 #

• 直接使用Drawer组件：点击按钮，抽屉平滑从底部滑上来，动画表现正常。
• 通过QRCodePopup Hook使用：点击按钮，抽屉瞬间出现，没有任何过渡动画。

预期与实际表现 #

• 预期： 两种使用方式都应该触发平滑的上滑过渡动画。
• 实际： 用Hook封装后，动画完全消失，抽屉直接显示。

最小复现示例 #

我做了一个最小化的复现示例来还原问题：
在线演示： CodeSandbox Demo

关键文件包括：

• src/App.tsx（主组件）
• src/components/Drawer.tsx（抽屉组件）
• src/components/UseQRCodePopup.ts（自定义Hook）

我已经尝试过的方法 #

• 强制重新挂载：给组件加上key={popupData.imgUrl}，确保每次打开时都触发重新渲染。
• 调整CSS过渡规则：在CSS里显式设置transition: transform 0.3s ease-in-out !important，强制应用过渡效果。
• 分离状态更新时机：用requestAnimationFrame和setTimeout来控制状态更新的顺序，尝试给动画留足触发时间。
• 移除冲突属性：把visibility换成opacity，避免和过渡效果产生冲突。

但这些方法都没解决问题，动画还是无法正常触发。

环境信息 #

• React版本：18.2.0
• 浏览器：Chrome 120
• 操作系统：Windows 11

为什么这个问题值得关注 #

Drawer组件本身的逻辑是没问题的，但封装到Hook里就出现了动画失效的情况，这说明可能是React在Hook环境下处理状态更新或者组件生命周期的方式有特殊的地方。我需要找到根本原因，修复动画的同时保持和直接使用时一致的行为。

想请教社区的问题 #

为什么用自定义Hook UseQRCodePopup封装后，过渡动画会失效？有没有办法在保持Hook封装的前提下，让动画和直接使用Drawer时一样正常工作？

备注：内容来源于stack exchange，提问作者DX D