React

Question

假设我有以下React组件：

class App extends Component {

  constructor() {
    super();
    this.state = {
      quote: "",
      author: ""
    }
  }

  getNewQuote() {

    this.setState({
      quote: // here I get some new text,
      author: // here I get some new text
    });
  }

  render() {
    return (
      <div>
            <span>{this.state.quote}</span>
            <h4>{this.state.author}</h4>
            <button onClick={() => this.getNewQuote()} >Get new</button>
      </div>
    );
  }
}

现在设置的方式，每次按下按钮，状态都会用新文本更新，然后调用渲染功能来显示新文本。

事情按预期工作但我想添加一些动画。我想这样做，以便每次调用渲染函数时，span和h4内容都会淡入（即不透明度在一秒钟内从0％变为100％）。

我在没有React的情况下做了类似的事情，我只是在每次更改时使用jQuery为组件设置动画，但我想知道如何在React中执行此操作。