CSS 过渡不适用于 react-portal答案

【问题标题】：CSS transition doesn't work with react-portalCSS 过渡不适用于 react-portal
【发布时间】：2021-08-05 23:39:05
【问题描述】：

我正在使用react-portal 进行对话并添加过渡，效果很好

// App.js
 return (
   <div className="App">
      <button onClick={() => setIsOpen(true)}>Click to see dialog</button>
      <PortalDialog isOpen={isOpen} setIsOpen={setIsOpen}>
        This is content of dialog
      </PortalDialog>
      {/* animation works */}
   </div>
  )

//PortalDialog.js
  return (
    <Portal>
      <DialogWrapper className={`${isOpen ? "active" : ""}`}>
        {children}
        <button onClick={() => setIsOpen(false)}>Close</button>
      </DialogWrapper>
    </Portal>
  );

直到我注意到每次渲染时都会创建 PortalDialog，这是我不想要的，所以我添加了一个条件

    <div className="App">
      <button onClick={() => setIsOpen(true)}>Click to see dialog</button>
      {isOpen && (
        <PortalDialog isOpen={isOpen} setIsOpen={setIsOpen}>
          This is content of dialog
        </PortalDialog> // animation doesn't work
      )}
    </div>

现在它不是每次都渲染，但 CSS 过渡不再起作用，我认为这是因为我添加的条件。但是我找不到使用react-portal 添加过渡的方法，我需要在这里做什么？我做了一个codesandbox example here。

【问题讨论】：

我想你要找的是ReactTransitionGroup。看一下这个。 reactcommunity.org/react-transition-group.
谢谢，我一定会去看看的。

标签： css reactjs css-transitions

【解决方案1】：

看起来ReactTransitionGroup 是答案，我用CSSTransition 组件包装了我的PortalDialog 组件，如他们的codesandbox sample 所示。

  <CSSTransition
      in={isOpen}
      timeout={300}
      classNames="dialog"
      unmountOnExit
    >
      <Portal>
        <DialogWrapper>
          {children}
          <button onClick={() => setIsOpen(false)}>Close</button>
        </DialogWrapper>
      </Portal>
   </CSSTransition>

现在无需在每次渲染上创建过渡即可工作。

【讨论】：