Reactjs 在React中设置显示/隐藏组件的动画？

因此，我开始研究React（来自VueJS世界），并遇到了我认为存在的问题：）

在我的状态下，我有一个布尔值用于显示/隐藏模态组件，如下所示：

{showModal && <Modal modalHeaderContent={modalHeaderContent} modalContent={modalContent} />}

这很有效。。。但是，有一点需要注意，模态组件始终存在于DOM中，即使showModal为false。。。所以我发现我也可以在ModalComponent中使用道具showModal，当showModal为true时显示Modal组件的内容，但是，当将showModal触发为false时，内容在淡出动画完成之前消失

我的观点是，这似乎有些夸张，因为当showmodel为false时，DOM中不需要该组件，并且没有理由在showmodel为true之前加载模态组件

我似乎找不到任何解决这个问题的办法

在Vue中，有一个过渡组件可以完美地处理这一点，其工作原理几乎相同，它可以处理CSS动画，还可以从DOM中添加/删除组件：

<transition name="modal" v-if="showModal">
   <modal-component />
</transition>

有什么想法吗？ 我非常希望避免使用一些升沉动画库来完成这个简单的事情…

您可以使用属性

---

嗯，是的，这就成功了，但它删除了动画：

<CSSTransition unmountOnExit in={showModal} timeout="1500" classNames="dialog">
            <Modal modalHeaderContent={modalHeaderContent} modalContent={modalContent} />
        </CSSTransition>

---

似乎就在我想显示模式的那一刻，添加了类对话框enter done，它从来没有应用过整个动画序列？

太棒了，没有看到那个道具：）谢谢

<CSSTransition unmountOnExit in={showModal} appear={showModal} timeout="1000" classNames="sample">
   <Modal modalHeaderContent={modalHeaderContent} modalContent={modalContent} />
</CSSTransition>

<CSSTransition unmountOnExit in={showModal} timeout="1500" classNames="dialog">
            <Modal modalHeaderContent={modalHeaderContent} modalContent={modalContent} />
        </CSSTransition>

.dialog-enter {
  opacity: 0;
  transition: opacity 1500ms;
}
.dialog-enter-active {
  opacity: 0.5;
}
.dialog-enter-done {
  opacity: 1;
}
.dialog-exit {
  opacity: 1;
  transition: opacity 1500ms;
}
.dialog-exiting {
  opacity: 0.5;
  transition: opacity 1500ms;
}
.dialog-exit-active {
  opacity: 0;
}