为什么过渡动画在自定义react钩中包装抽屉组件时不起作用？

Question

问题描述

I在React中具有

Drawer

组分（自下而上的模态）。直接使用它时，动画可完美地工作 - 它从底部平稳地滑动。但是，当我将其包裹在自定义钩子（

UseQRCodePopup

）中时，过渡动画停止工作。抽屉没有滑动，而是立即出现，没有任何动画。我已经检查了CSS和州管理逻辑，但无法确定问题的根本原因。

to繁殖

---

的直接用法：单击按钮，抽屉从底部平稳滑动。

钩使用（

Drawer
1. ）：单击按钮，抽屉立即出现而无需任何动画。
指望与实际行为
2. 表明：
两种用法方法都应触发平滑的滑动过渡动画。

---

实际：

使用钩子时，动画丢失了，抽屉立即出现。

小型可重现示例
• 我创建了一个代码和盒子演示来复制该问题：
• Live演示：codesandboxdemo

---

键文件：

QRCodePopup

（主组件）
src/App.tsx（抽屉组件）

src/components/Drawer.tsx

（自定义钩）

我尝试了什么
• force重新安装：
使用
• src/components/UseQRCodePopup.tsx

  确保每次打开的组件重新呈现。
  调整的CSS过渡：

  明确设置css.

---

分开状态更新时间：

使用key={popupData.imgUrl}和

transition: transform 0.3s ease-in-out !important

控制状态更新顺序。
1. 取代的矛盾属性：用

   requestAnimationFrame

   替换为
setTimeout
2. 以避免与过渡发生冲突。 环境

3. 反射版本：

   18.2.0
兄弟：
4. Chrome120

   OS：

   Windows11

---

为什么这重要

当直接使用时，组件可完美地工作，但是当用自定义钩子包裹时，动画会破裂。这表明了反应如何处理状态更新或钩子中的组件生命周期的潜在问题。我需要帮助识别根本原因并修复动画。 社区的问题

使用自定义钩（
• visibility）时，过渡动画为什么会失败，在保持与直接使用opacity
？
• 的同一行为的同时，我该如何修复它？
• 从docs：

---

组件可以渲染其他组件，但是您绝不能筑巢 定义：

Drawer

上面的片段非常慢，会导致错误。相反，定义每个 顶部的组件：

UseQRCodePopup

当子部分需要父母的一些数据时，请通过道具将其传递 而不是嵌套定义。

---

基本上，您应该做的是将该组件提取到最高级别，然后导入并通过prop。 CodesandboxDemo