CSS transition 不适用于 react-portal

Question

我正在使用 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.

Answer 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>

过渡现在无需在每次渲染时都创建即可。

CSS transition 不适用于 react-portal

CSS transition doesn't work with react-portal

css

css-transitions

reactjs