我已经使用React
和Tailwind
构建了一个模态/对话框组件。这是一个关于我的问题的代码沙盒。
现在我想在这里用一个很好的动画来显示和隐藏模态。
我已经尝试过使用react转换组包来创建它。
我的问题
目前,我只设法让它在entering
上工作——dom但是,也就是在包装整个Confirm.jsx
组件时。这并不理想,因为这意味着每当我想在应用程序中的某个地方使用Confirm.jsx
时,我还必须使用<CSSTransition>
组件来包装它。
因此,理想情况下,我想在Confirm.jsx
或Dialog.jsx
中添加<CSSTransition>
组件,但无论我尝试什么,我都无法使这些组件工作。
我在这里错过了什么?
以下是我所做的一点更改。
我将CSSTransition移动到您的Confirm
组件,并在open
状态为false
时删除了Confirm
和Dialog
中的早期返回
当open
状态设置为null时,您没有返回任何内容。这是在取消退出动画。CSSTransition需要有一些东西来渲染,这样它就可以在退出时添加退出动画类。动画完成后,CSSTransition会从DOM中删除childtren,因为您已经设置了unmountOnExit属性