在React中写一个Animation组件为组件进入和离开加上动画/过度效果

// App.jsx// 其他代码省略import './app.css';<Animation isShow={isShow} name='demo'>  <div class='demo'>    demo  </div></Animation>// 通过改变isShow的值来指定是否显示在 App.css 里指定进入离开效果：// 基础样式.demo {  width: 200px;  height: 200px;  background-color: red;}// 定义进出入动画.demo-showing {  animation: show 0.5s forwards;}.demo-fading {  animation: fade 0.5s forwards;}// 定义动画fade与show@keyframes show {  from {    opacity: 0;  }  to {    opacity: 1;  }}@keyframes fade {  from {    opacity: 1;  }  to {    opacity: 0;  }}

// Animation.jsximport { PureComponent } from 'react';import './index.css';class Animation extends PureComponent {  constructor(props) {    super(props);    this.state = {      isInnerShow: false,      animationClass: '',    };  }  componentWillReceiveProps(props) {    const { isShow } = props;    if (isShow) {      // 显示      this.show().then(() => {        this.doShowAnimation();      });    } else {      // 隐藏      this.doFadeAnimation();    }  }  handleAnimationEnd() {    const isFading = this.state.animationClass === this.className('fading');    if (isFading) {      this.hide();    }  }  show() {    return new Promise(resolve => {      this.setState(        {          isInnerShow: true,        },        () => {          resolve();        }      );    });  }  hide() {    this.setState({      isInnerShow: false,    });  }  doShowAnimation() {    this.setState({      animationClass: this.className('showing'),    });  }  doFadeAnimation() {    this.setState({      animationClass: this.className('fading'),    });  }  /**   * 获取className   * @param {string} inner 'showing' | 'fading'   */  className(inner) {    const { name } = this.props;    if (!name) throw new Error('animation name must be assigned');    return `${name}-${inner}`;  }  render() {    let { children } = this.props;    children = React.Children.only(children);    const { isInnerShow, animationClass } = this.state;    const element = {      ...children,      props: {        ...children.props,        className: `${children.props.className} ${animationClass}`,        onAnimationEnd: this.handleAnimationEnd.bind(this),      },    };    return isInnerShow && element;  }}export default Animation;