Javascript 在中更改时淡出/淡入文本

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

我在纯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>

{this.state.leftButton}
{this.state.rightButton}

编辑：

---

我尝试了使用

reactcstransitiongroup

，但效果并不理想。它添加了新文本，然后淡出旧文本，同时淡入新文本。

使用ReactCSStransitongGroup，这是的一部分。它是为您的确切用例而设计的。

有一个类似的用例，最后使用计时器更新了几个状态变量

一个状态变量跟踪消息文本，另一个状态变量跟踪组件

className

中

fade

类的应用。

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>
    );
  }

。。。
//在某些处理程序代码中
this.setState（{facing:true}）；//淡出
this.timer=setTimeout（=>{
this.setState（{msg:'somenewtext'}）；//交换文本
this.setState（{淡入：false}）；//淡入
}, 500); // 动画定时偏移
//渲染中
render（）{
const{msg，facing}=this.state；
返回(
{msg}
);
}

同样的css应该可以工作，只需将样式attrib编码到模板中即可。它确实可以工作，但在呈现方法中包含setTimeout等似乎有点不太妥当。您应该为组件定义类似于

this.setText（str）

的内容，并将

setTimeout

放在其中，而不是

.render（）

您可以使用props/state来触发

render（）

我尝试了

reactcstransitiongroup

，但是在添加新文本时，旧文本会粘住。换句话说，它没有给我想要的效果。你在CSS动画中添加了延迟吗？没有。基本上只是尝试了React教程所说的，因为他们有一个淡入示例。尝试淡入淡出：我们可以使用React生命周期吗？是的，这可能会作为一个“挂钩”点，按照上面的思路运行一些东西。例如，

组件将更新

使用定时器应用淡出，以淡入恢复。但我认为，如果您依赖于

componentdiddupdate

来应用淡入，那么效果将无效，因为所有操作都执行得太“快”