如何使用 React-Transition-Group 显示和隐藏带有动画的模态/对话框？
Posted
技术标签:
【中文标题】如何使用 React-Transition-Group 显示和隐藏带有动画的模态/对话框？【英文标题】：How to use React-Transition-Group to show and hide modal/dialog with animation? 【发布时间】：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> 组件，但无论我尝试什么，我都无法让这些工作。
我在这里错过了什么？
【问题讨论】：
【参考方案1】：这是我制作的小change。
当open 状态为false 时，我将CSSTransition 移至您的Confirm 组件并删除了Confirm 和Dialog 中的早期返回
当open 状态设置为空时，您没有返回任何内容。这是取消您的退出动画。 CSSTransition 需要渲染一些东西，以便它可以在退出时添加退出动画类。动画完成后，CSSTransition 会从 DOM 中移除 childtren，因为您已经设置了 unmountOnExit 属性
【讨论】：
以上是关于如何使用 React-Transition-Group 显示和隐藏带有动画的模态/对话框？的主要内容，如果未能解决你的问题，请参考以下文章
如何在自动布局中使用约束标识符以及如何使用标识符更改约束？ [迅速]
如何使用 AngularJS 的 ng-model 创建一个数组以及如何使用 jquery 提交？