reactjs - How to fade text in, then out -

i'm trying make notification next appear text input inform users text saved, , fade notification text out.

basically i'm trying replicate action, when corresponding text input submitted.

$(this).fadeout().next().fadein();

i can't think of way fade in, out, isn't absurdly roundabout.

i'm using redux well, , use that, it's not requirement. advice appreciated.

you can use css take care of that. here's simple example (not using redux). use js trigger, css style.

class app extends react.component {    constructor() {      super();      this.state = {        show: false      };      this.shownotification = this.shownotification.bind(this);    }    shownotification() {      // can use redux this.      this.setstate({        show: true,      });      settimeout(() => {        this.setstate({          show: false,        });      }, 1000);    }    render() {      return (        <div>          <button onclick={this.shownotification}>save</button>          <notification show={this.state.show} />        </div>      );    }    }    class notification extends react.component {    render() {      return <span classname={this.props.show ? 'show' : ''}>saved!</span>    }  }    reactdom.render(<app/>, document.getelementbyid('view'));

span {    transition: 300ms ease;    opacity: 0;    will-change: opacity;  }    .show {    opacity: 1;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <div id="view"></div>