How do I use React's CSSTransitionGroup to fade-in/out my alert message?

Question

I'm trying to build a React 16.13.0 Flash component, that I would like to fade-in and fade-out an alert message (for instance, to tell the user something has saved successfully). I'm using the CSSTransitionGroup to try and do this. I built this Flash component

import React, { useEffect, useState } from "react";
import Bus from "../Utils/Bus";
import { CSSTransition } from "react-transition-group";

import "./index.css";

export const Flash = () => {
  let [visibility, setVisibility] = useState(false);
  let [message, setMessage] = useState("");
  let [type, setType] = useState("");

  useEffect(() => {
    Bus.addListener("flash", ({ message, type }) => {
      setVisibility(true);
      setMessage(message);
      setType(type);
      setTimeout(() => {
        setVisibility(false);
      }, 4000);
    });
  }, []);

  useEffect(() => {
    if (document.querySelector(".close") !== null) {
      document
        .querySelector(".close")
        .addEventListener("click", () => setVisibility(false));
    }
  });

  return (
    visibility && (
      <CSSTransition in={visibility} timeout={300} classNames="sample">
        <div className={`alert alert-${type}`}>
          <span className="close">
            <strong>X</strong>
          </span>
          <p>{message}</p>
        </div>
      </CSSTransition>
    )
  );
};

and am using the following CSS ...

.alert {
  color: white;
  border-radius: 10px;
  position: absolute;
  top: 50px;
  padding: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 1111;
}

.alert p {
  margin: 0;
}

.alert-error {
  background: lightcoral;
}

.alert-success {
  background: lightgreen;
}

.close {
  color: white;
  cursor: pointer;
  margin-right: 10px;
}

.sample-enter {
  opacity: 0;
}

.sample-enter-active {
  opacity: 0.5;
  transition: opacity 300ms;
}

.sample-enter-done {
  opacity: 1;
}

.sample-exit {
  opacity: 1;
}

.sample-exit-active {
  opacity: 0.5;
  transition: opacity 300ms;
}

.sample-exit-done {
  opacity: 0;
}

However, the message appears without a fade-in and then disappears without a fade-out. I'm not sure what else I'm doing wrong or need to add.

Answer 1

I'm not sure if the key is at the -appear css selector but the following one works on my component (styled with class fade)

.fade-appear {
  opacity: 0;
  z-index: 1;
}

.fade-appear.fade-appear-active {
  opacity: 1;
  transition: opacity 1000ms linear;
}

.fade-enter {
  opacity: 0;
  z-index: 1;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 5000ms linear 5000ms;
}

.fade-exit {
  opacity: 1;
}

.fade-exit.fade-exit-active {
  opacity: 0;
  transition: opacity 5000ms linear;
}

.fade-exit-done {
  opacity: 0;
}

using version 4.3.0

My exact component is this

    <CSSTransition in={true}
                   appear={true}
                   timeout={500}
                   classNames="fade"
                   unmountOnExit>

Answer 2

Remove visibility && from your return statement:

return (
      <CSSTransition in={visibility} timeout={300} classNames="sample">
        <div className={`alert alert-${type}`}>
          <span className="close">
            <strong>X</strong>
          </span>
          <p>{message}</p>
        </div>
      </CSSTransition>
    )

The in prop controls the enter / exit transition. Exit transition is triggered only when in is false. There is no scenario in your code when this happens.