React Popper and React CSStransition

Question

我正在构建一个React项目。在项目中，我使用React Popper 2下拉菜单。伟大的自动定位下拉菜单，当你在网页浏览器的边缘等。我还使用React过渡组/React cstransition来制作一些动画。我在项目中使用钩子，没有类组件。

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

引用: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>

我也试过把cstransition放在popperElement中，但这行不通。

有谁知道怎么让他们都工作吗?

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