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

Posted 2023-03-06

【中文标题】在 React 中更改时淡出/在文本中

【英文标题】：Fade out / in text when changing in React

【发布时间】：2016-05-31 06:25:23

【问题描述】：

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

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，但效果不如预期。它添加了新文本，然后在淡入新文本的同时淡出旧文本。

【问题讨论】：

同样的css应该可以工作，只需将样式属性编码到模板中

它确实可以，但是在渲染方法中包含 setTimeout 等似乎有点 hacky。

你应该为组件定义类似this.setText(str)的东西并将setTimeout放在那里而不是.render()你可以使用props/state来触发render()

【参考方案1】：

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

【讨论】：

我尝试了ReactCSSTransitionGroup，但是在添加新文本时旧文本仍然存在。换句话说 - 它没有给我想要的效果。

你是否在 CSS 动画中添加了延迟？

不，没有。基本上只是尝试了 React 教程所说的内容，因为它们在示例中有淡入淡出。

试试这个淡出然后进入：github.com/marnusw/react-css-transition-replace

【参考方案2】：

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

一个状态变量用于跟踪消息文本，另一个用于跟踪组件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>
    );
  

【讨论】：

我们可以使用 React Lifecycle 吗？

是的，这可能会作为一个“挂钩”点来运行上述内容。例如。 componentWillUpdate 使用计时器应用淡出以通过淡入恢复。但我认为，如果您依靠componentDidUpdate 应用淡入，那么效果将无效，因为一切都执行得太“迅速”