React Popper 和 React CSStransition答案

【问题标题】：React Popper and React CSStransitionReact Popper 和 React CSStransition
【发布时间】：2021-03-09 08:41:13
【问题描述】：

我正在构建一个 React 项目。在项目中，我使用 React Popper 2 作为下拉菜单。非常适合在您靠近 Web 浏览器边缘时自动定位下拉菜单等。我还使用 React Transition Group / React CSStransition 来制作一些动画。我在项目中使用钩子，没有类组件。

但我似乎无法将两者结合起来。问题是 Popper 进入和退出下拉菜单。所以 CSStransition 创建了它应该的类，但它不起作用，因为它们都进入和退出元素。我不知道如何解决这个问题。

参考资料：

https://popper.js.org/

https://reactcommunity.org/react-transition-group/

这是组件 atm：

<CSSTransition
        classNames="popper-dd"
        in={visible}
        timeout={10000}
        unmountOnExit
        >
          <div ref={popperElement}
                  onClick={() => autoclose!==false && setVisible(false)}
                  className={cn("Dropdown-tooltip", classes)}
                  style={{ ...styles.popper}}
                  {...attributes.popper}>
                    Test
                    <div className="cm-pos-dd-left bg-white absolute p-3 rounded-xl shadow z-20 text-black">
                      {children}
                    </div>
                  
          </div>
        </CSSTransition>

我也尝试将 CSStransition 放在 popperElement 中，但这并没有成功。

有人知道如何让它们同时工作吗？

【问题讨论】：

标签： reactjs reactcsstransitiongroup react-popper

【解决方案1】：

我确实想通了。这可能不是最漂亮的解决方案，但它似乎有效。

ReactJS：

<CSSTransition
    in={visible}
    classNames="popper-dd"
    timeout={150}>

      <div ref={popperElement}
              onClick={() => autoclose!==false && setVisible(false)}
              className={cn("popper-dd-init cm-pos-dd-left bg-white absolute p-3 rounded-xl shadow z-20 text-black Dropdown-tooltip", classes)}
              style={{ ...styles.popper}}
              {...attributes.popper}>
          {children}
          {/*<div ref={arrowElement} className="Dropdown-arrow" style={styles.arrow} />*/}
      </div>
    </CSSTransition>

CSS：

--popper-transition: margin-top .15s ease-in-out, opacity .15s ease-in-out;
--popper-top: -.5rem;

.popper-dd-init {
  display: none;
}

.popper-dd-init.popper-dd-enter {
  display: block;
  pointer-events: none;
  margin-top: var(--popper-top);
  opacity: .5;
  transition: var(--popper-transition);
}

.popper-dd-init.popper-dd-enter-active {
  margin-top: 0;
  opacity: 1;
  pointer-events: auto;
}

.popper-dd-init.popper-dd-enter-done {
  display: block;
}

.popper-dd-init.popper-dd-exit {
  display: block;
  margin-top: 0;
  opacity: 1;
}

.popper-dd-exit-active {
  pointer-events: none;
  transition: var(--popper-transition);
  margin-top: var(--popper-top) !important;
  opacity: .5 !important;
}

.popper-dd-exit-done {
  display: none;
}

【讨论】：