Как мне использовать React CSSTransitionGroup для постепенного появления / исчезновения моего предупреждающего сообщения? - PullRequest
Новая
       45

Как мне использовать React CSSTransitionGroup для постепенного появления / исчезновения моего предупреждающего сообщения?

0 голосов
/ 12 июля 2020

Я пытаюсь создать компонент React 16.13.0 Fla sh, для которого я хотел бы постепенно появляться и исчезать предупреждающее сообщение (например, чтобы сообщить пользователю, что что-то было успешно сохранено). Я использую CSSTransitionGroup, чтобы попытаться сделать это. Я построил этот компонент Fla sh 

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

и использую следующие 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;
}

Однако сообщение появляется без затухания, а затем исчезает без затухания. Я не уверен, что еще делаю не так или что нужно добавить.

1 Ответ

0 голосов
/ 12 июля 2020

Я не уверен, что ключ находится в селекторе -appear css, но следующий работает с моим компонентом (стилизованный с классом 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;
}

с использованием версии 4.3. 0

Мой точный компонент - это 

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