如何淡入文本然后退出

时间:2016-11-05 17:36:08

标签: reactjs reactcsstransitiongroup

我尝试在接下来的通知中显示文本输入,以通知用户他们的文本已保存,然后淡出该通知文本。

基本上,当提交相应的文本输入时,我试图复制此操作。

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

我无法想办法淡出它,然后出去,这不是荒谬的回旋。

我也使用Redux,并希望使用它,但它不是必需的。任何建议将不胜感激。

2 个答案:

答案 0 :(得分:5)

您可以使用CSS来处理这个问题。这是一个非常简单的例子(不使用redux)。使用JS触发,CSS用于样式。



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'));
&#13;
span {
  transition: 300ms all ease;
  opacity: 0;
  will-change: opacity;
}

.show {
  opacity: 1;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我知道react的确很棒,但是所有人都不要忘记jquery:

这有点荒唐可笑:

$('#mydiv').fadeOut(3000)