React Popper and React CSStransition

Question

I am building a React project. Within the projekt I am using React Popper 2 for dropdown menus. Great for auto positioning the dropdown menu when you are near the edges of the web browser, etc. I am also using React Transition Group / React CSStransition to make some animations. I am working with hooks in the project, no class components.

But I do not seem to be able to combine the both. Problem is that Popper enters and exits the dropdown menu. So CSStransition creates the classes as it should, but it does not work since they both enters and exits the element. And I have no clue how to resolve this.

References:

https://popper.js.org/

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

This is the component 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>

I have also tried to place the CSStransition within the popperElement, but that does not do the trick.

Anyone have any clue how to get them both to work?

Answer 1

I did figure it out. It is maybe not the most beautiful solution, but it seems to work.

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