2

I'm trying to make a notification next appear to a text input to inform the users their text was saved, and then fade that notification text out.

Basically I'm trying to replicate this action, when a corresponding text input is submitted.

$(this).fadeOut().next().fadeIn();

I can't think of any way to fade it in, then out, that isn't absurdly roundabout.

I'm using Redux as well, and would like to use that, but it's not a requirement. Any advice would be appreciated.

Rob
  • 14,746
  • 28
  • 47
  • 65
Slbox
  • 10,957
  • 15
  • 54
  • 106

2 Answers2

8

You can use CSS to take care of that. Here's a very simple example (not using redux). Use JS to trigger, CSS to style.

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      show: false
    };
    this.showNotification = this.showNotification.bind(this);
  }
  showNotification() {
    // You can use redux for 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 all 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>
Fabian Schultz
  • 18,138
  • 5
  • 49
  • 56
0

i know react is really great and all but lets not forget about jquery:

this is a little bit less absurdly round about:

$('#mydiv').fadeOut(3000)
Jar
  • 1,766
  • 1
  • 21
  • 27