我正在构建一个 React 项目。在项目中,我使用 React Popper 2 作为下拉菜单。非常适合在靠近 Web 浏览器边缘时自动定位下拉菜单等。我还使用 React Transition Group / React CSStransition 来制作一些动画。我在项目中使用钩子,没有类组件。
但我似乎无法将两者结合起来。问题是 Popper 进入和退出下拉菜单。所以 CSStransition 创建了它应该的类,但它不起作用,因为它们都进入和退出元素。我不知道如何解决这个问题。
参考:
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 中,但这并不能解决问题。
任何人都知道如何让他们都工作?