Interface CSSTransitionClassNamesObject

Explaining className application

const { ref, className, stage, appearing } = useCSSTransition({
  appear: true,
  enter: true,
  exit: true,
  timeout: 300,
  classNames: {
    appear: "appear",
    appearEnter: "appear--enter",
    appearDone: "appear--done appear--complete",
    enter: "enter",
    enterEnter: "",
    enterDone: "enter--done enter--complete",
    exit: "",
    exitEnter: "",
    exitDone: "exit--done exit--complete",
  }
});

// stage === "enter" && appearing
// className === "appear"
//
// stage === "entering" && appearing
// className === "appear appear--enter"
//
// stage === "entered" && appearing
// className === "appear--done appear--complete"
//
//
// stage === "enter" && !appearing
// className === "enter"
//
// stage === "entering" && !appearing
// className === "enter"
//
// stage === "entered" && !appearing
// className === "enter--done enter--complete"
//
//
// stage === "exit"
// className === ""
//
// stage === "exiting"
// className === ""
//
// stage === "exited"
// className === "exit--done exit--complete"

@since 4.0.0