Как запустить анимацию с помощью кнопки в React.js?

Question

Итак, я пытаюсь заставить текст постепенно исчезать при нажатии кнопки; Вы нажимаете его, и текст исчезает, чтобы быть замененным новым текстом, который исчезает.

Ранее я делал это только с псевдоклассом CSS при наведении, поскольку псевдокласс не используется специально для событий нажатия. Скорее, существуют псевдоклассы, подобные тому, который используется для определения того, был ли установлен флажок, но я хочу посмотреть, есть ли способ обработки события без использования какого-либо «хака» (например, с использованием события флажка) или накладных расходов.

EDIT:

Вот фрагмент кода, который, вероятно, будет отвечать за анимацию (отображается кнопка, обновляющая цитату на экране).

  showQuote() {
    this.props.showNextQuote(QUOTES[rnd()]);
    this.setState({ quote: this.props.quote });
  }

  render() {
    return (
      <div id="quote-box" style={boxStyle}>
        <h1>
          <strong>On One Hand...</strong>
        </h1>
        <p id="text">{this.props.quote}</p>
        <p id="author" style={{ textAlign : "right", margin : "10px" }}><em>- DG</em></p>
        <button id="new-quote" style={{ marginRight: '4%' }} onClick={this.showQuote}>Quote</button>
        <a id="tweet-quote" class="button" style={{ textAlign: 'center', float: 'left' }} title="Tweet this quote!" href="twitter.com/intent/tweet">
          <i class="fa fa-twitter" />
        </a>
      </div>
    );
  }
}