如何使用 React-Transition-Group 显示和隐藏 modal/dialog 动画?
How to use React-Transition-Group to show and hide modal/dialog with animation?
我使用 React
和 Tailwind
构建了一个 modal/dialog 组件。这里有一个codesandbox with my problem.
现在我想用像 this one here 这样的漂亮动画来显示和隐藏模态框。
我试过使用 react-transition-group 包创建它。
我的问题
目前我只设法让它在 entering
dom BUT 上工作,即包装整个 Confirm.jsx
组件.这并不理想,因为这意味着每次我想在我的应用程序中的某个地方使用 Confirm.jsx
时,我还必须用 <CSSTransition>
组件包装它。
所以理想情况下,我想在 Confirm.jsx
或 Dialog.jsx
中添加 <CSSTransition>
组件,但无论我尝试什么,我都无法使它们工作。
我在这里错过了什么?
这是我做的小 change。
我将 CSSTransition 移动到您的 Confirm
组件,并在 open
状态为 false
时删除了 Confirm
和 Dialog
中的早期 returns
当 open
状态设置为 null 时,您没有返回任何内容。这正在取消您的退出动画。 CSSTransition 需要进行渲染,以便它可以在退出时添加退出动画 类。动画完成后,CSSTransition 会从 DOM 中移除子元素,因为您已经设置了 unmountOnExit 属性
我使用 React
和 Tailwind
构建了一个 modal/dialog 组件。这里有一个codesandbox with my problem.
现在我想用像 this one here 这样的漂亮动画来显示和隐藏模态框。
我试过使用 react-transition-group 包创建它。
我的问题
目前我只设法让它在 entering
dom BUT 上工作,即包装整个 Confirm.jsx
组件.这并不理想,因为这意味着每次我想在我的应用程序中的某个地方使用 Confirm.jsx
时,我还必须用 <CSSTransition>
组件包装它。
所以理想情况下,我想在 Confirm.jsx
或 Dialog.jsx
中添加 <CSSTransition>
组件,但无论我尝试什么,我都无法使它们工作。
我在这里错过了什么?
这是我做的小 change。
我将 CSSTransition 移动到您的 Confirm
组件,并在 open
状态为 false
时删除了 Confirm
和 Dialog
中的早期 returns
当 open
状态设置为 null 时,您没有返回任何内容。这正在取消您的退出动画。 CSSTransition 需要进行渲染,以便它可以在退出时添加退出动画 类。动画完成后,CSSTransition 会从 DOM 中移除子元素,因为您已经设置了 unmountOnExit 属性