如何使用 React-Transition-Group 显示和隐藏带有 animation 的模式/对话框？

Question

我使用React和Tailwind构建了一个模式/对话框组件。 这是我的问题的代码框。

现在我想用一个像这里这样的漂亮 animation 来显示和隐藏模态。

我尝试使用react-transition-group package 创建它。

我的问题

目前，我只设法让它在entering dom但包装整个Confirm.jsx组件时工作。 这并不理想，因为这意味着每次我想在我的应用程序的某个地方使用Confirm.jsx时，我还必须将它与<CSSTransition>组件一起包装。

所以理想情况下，我想在Confirm.jsx或Dialog.jsx中添加<CSSTransition>组件，但无论我尝试什么，我都无法让这些工作。

我在这里想念什么？

Answer 1

这是我所做的小改动。

当open state 为false时，我将 CSSTransition 移至您的Confirm组件并删除了Confirm和Dialog中的早期返回

当open state 设置为 null 时，您什么也没有返回。 这是取消您的退出 animation。 CSSTransition 需要渲染一些东西，以便它可以在退出时添加退出 animation 类。 animation 完成后，CSSTransition 会从 DOM 中删除 childtren，因为您已经设置了 unmountOnExit 属性