使用react-transition-group实现简单动画

1.下载

# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

2.在需要使用动画的组件中引入

import { CSSTransition } from 'react-transition-group';

3.将CSSTransition包裹在需要显示动画的标签外层

<CSSTransition
              in={showValidationMessage}
              timeout={300}
              classNames="fade"
              unmountOnExit
              appear = {true}
            >
    <div>hello</div>
</CSSTransition>



//in    状态，当前是入场还是出场
//timeout   时间间隔
//classNames 与3的入场或者出场clss名的前缀（看下一段代码）
//unmountOnExit 移除dom (状态是隐藏的时候会自动移除dom)
//appear 第一次展示是否也需要动画

4.写对应的样式

.fade-enter, .fade-appear {
    /*入场的第一个时刻*/
    opacity: 0;
}
.fade-enter-active, .fade-appear-active {
    /*入场第二个时刻到入场动画完成之前的时刻*/
    opacity: 1;
    transition: opacity 1s ease-