Question

我想创建一个按钮，根据应用程序的状态更改其文本。我希望旧文本淡出，然后新文本淡出。

Here's a pen我在纯JS中实现了我想要的东西。

我如何在React中实现相同的效果 - 或者什么是最好的方法？

供参考，这是我的JSX：

<div className="buttons">
  <div className="half">
    <button className="button" onClick={this.chooseLeft}>{this.state.leftButton}</button>
  </div>
  <div className="half">
    <button className="button" onClick={this.chooseRight}>{this.state.rightButton}</button>
  </div>
</div>

编辑：

我尝试使用ReactCSSTransitionGroup，但它并没有像预期的那样有效。它添加了新文本，然后淡出旧文本，同时淡入新文本。

Answer 1

使用ReactCSSTransitionGroup，react's animation add-ons的一部分。它专为您的确切用例而设计。

Answer 2

有一个类似的用例，并最终使用计时器来更新几个状态变量。

一个状态var用于跟踪消息文本，另一个用于跟踪组件fade中className类的应用。 fade类基本上控制文本块的不透明度。

例如：

...
// in some handler code
  this.setState({fading: true}); // fade out
  this.timer = setTimeout(_ => {
    this.setState({msg: 'Some new text'}); // swap the text
    this.setState({fading: false}); // fade back in
  }, 500); // animation timing offset

// in render
  render() {
    const {msg, fading} = this.state;

    return (
      <h1 className={`${fading ? 'faded' : ''}`}>
        {msg}
      </h1>
    );
  }

在React中更改时淡出/淡出文本

2 个答案: