如何使用 React CSSTransitionGroup 淡入/淡出我的警报消息？答案

【问题标题】：How do I use React's CSSTransitionGroup to fade-in/out my alert message?如何使用 React CSSTransitionGroup 淡入/淡出我的警报消息？
【发布时间】：2020-11-02 00:43:20
【问题描述】：

我正在尝试构建一个 React 16.13.0 Flash 组件，我想淡入和淡出警报消息（例如，告诉用户某些内容已成功保存）。我正在使用 CSSTransitionGroup 来尝试执行此操作。我构建了这个 Flash 组件

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

但是，该消息在没有淡入的情况下出现，然后在没有淡出的情况下消失。我不确定我还有什么做错或需要添加。

【问题讨论】：

标签： reactjs css-transitions fade reactcsstransitiongroup

【解决方案1】：

从您的退货声明中删除 visibility &&：

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

in 属性控制进入/退出转换。仅当in 为false 时才会触发退出转换。发生这种情况时，您的代码中没有任何场景。

【讨论】：

【解决方案2】：

我不确定键是否在 -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>

【讨论】：