Как добавить эффект затухания при удалении компонента из DOM? - PullRequest
Новая
       39

Как добавить эффект затухания при удалении компонента из DOM?

0 голосов
/ 25 января 2019

У меня есть компонент ErrorFadeInDown, который используется для отображения ошибки моего приложения. Эффект ошибки (CSS) -> Окно ошибок падает сверху вниз. Этот компонент визуализируется с эффектом fade-in-down , для которого я использовал styled-components вместе с библиотекой react-animations.
На данный момент ErrorFadeInDown визуализируется с эффектом fade-in-down , но при закрытии закрывается без эффекта. Я хочу знать, как добавить эффект fade-up ? 

import React from "react";
import styled, { keyframes } from "styled-components";
import { fadeInDown } from "react-animations";
import PropTypes from "prop-types";

const fadeInDownAnimation = keyframes`${fadeInDown}`;

const ErrorBox = styled.div`
  position: relative;
  animation: 500ms ${fadeInDownAnimation};
  position: fixed;
  background: #c62828;
  padding: 5px 20px 5px 5px;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  box-shadow: 0px 0.1px 2px 1px white;
  z-index: 2001;

  ._error_message {
    color: white;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bolder;
  }

  button {
    /* CSS for the close button of error */
  }
`;

class ErrorFadeInDown extends React.Component {

  render() {
    return (
      <ErrorBox onClick={this.props.clearError}>
        <span className="_error_message">{this.props.errorMessage}</span>
        <span>
          <button onClick={this.props.clearError}>&times;</button>
        </span>
      </ErrorBox>
    );
  }
}

ErrorFadeInDown.propTypes = {
  errorMessage: PropTypes.string.isRequired,
  clearError: PropTypes.func.isRequired
};

export default ErrorFadeInDown;

И вот как вызывается предупреждение об ошибке: 

    {error && (
      <ErrorFadeInDown
        errorMessage={error}
        clearError={clearError}
      />
    )}

Библиотека react-animations имеет эффект fadeOutUp, но я не знаю, как добавить его при закрытии события. Любая идея, как добавить эффект постепенного исчезновения ?

...