React CSSTransition

Question

I am creating side drawer using CSSTransition group it working fine but time delay in opening and closing drawer is very fast.

import React from "react";
import ReactDOM from "react-dom";
import { CSSTransition } from "react-transition-group";
import "./SideDrawer.css";
const SideDrawer = (props) => {
  const content = (
    <CSSTransition
      in={props.show}
      timeout={300}
      classNames="let"
      unmountOnExit
      mountOnEnter
    >
      <aside className="sidedrawer" onClick={props.onClick}>
        {props.children}
      </aside>
    </CSSTransition>
  );
  return ReactDOM.createPortal(content, document.getElementById("drawer-hook"));
};

export default SideDrawer;

Sidedrawer.css

.sidedrawer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  height: 100%;
  width: 62%;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}

Answer 1

You're using the classNames of CSSTransition wrong. It provides you classes for each phase of CSS transitions, so you can write your styles using its classes. Here is the right CSS for that:

.let-enter {
  opacity: 0;
  transition: left 0.3s ease-in-out;
}

.let-enter-active {
  transform: translate3d(-100%, 0px, 0px);
  visibility: visible;
  transition: all 0.5s ease 0s;
}

.let-exit-active {
  transform: translate3d(-100%, 0px, 0px);
  visibility: visible;
  transition: all 0.5s ease 0s;
}

Here is the explanation from the source code of CSSTransition:

/**
 * The animation `classNames` applied to the component as it enters or exits.
 * A single name can be provided and it will be suffixed for each stage: e.g.
 *
 * `classNames="fade"` applies `fade-enter`, `fade-enter-active`,
 * `fade-exit`, `fade-exit-active`, `fade-appear`, and `fade-appear-active`.
 *
 * Each individual classNames can also be specified independently like:
 *
 * ```js
 * classNames={{
 *   appear: 'my-appear',
 *   appearActive: 'my-appear-active',
 *   appearDone: 'my-appear-done',
 *   enter: 'my-enter',
 *   enterActive: 'my-enter-active',
 *   enterDone: 'my-enter-done',
 *   exit: 'my-exit',
 *   exitActive: 'my-exit-active',
 *   exitDone: 'my-exit-done'
 * }}
 * ```
 */