如何使用 React-Transition-Group 显示和隐藏带有动画的模态/对话框？答案

【问题标题】：How to use React-Transition-Group to show and hide modal/dialog with animation?如何使用 React-Transition-Group 显示和隐藏带有动画的模态/对话框？
【发布时间】：2022-01-08 04:52:57
【问题描述】：

我使用React 和Tailwind 构建了一个模态/对话框组件。这是codesandbox with my problem。

现在我想用像this one here 这样的漂亮动画来显示和隐藏模态框。

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

我的问题

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

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

我在这里错过了什么？

【问题讨论】：

标签： javascript reactjs jsx react-transition-group

【解决方案1】：

这是我制作的小change。

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

当open 状态设置为空时，您没有返回任何内容。这是取消您的退出动画。 CSSTransition 需要渲染一些东西，以便它可以在退出时添加退出动画类。动画完成后，CSSTransition 会从 DOM 中移除 childtren，因为您已经设置了 unmountOnExit 属性

【讨论】：