在反应中更改值后使文本变白？反应-spring？

Question

我有一个div，有球员得分、死亡和助攻：

    <div className="liveMatchPlayerScore">
      {data.kill_count}/{data.death_count}/{data.assists_count}
    </div>

每次杀戮或死亡计数发生变化时，我希望文本变为粗体白色并持续 3 秒。

我正在考虑为此使用 react-spring，特别是 useTransitions，但文档显示了使用项目数组的示例。我打算把每个分数都放在一个数组中，但这似乎适得其反。

以前我尝试将乐谱包装在来自 react-spring 的 "Spring" 组件中，但这只是在初始渲染时对乐谱进行动画处理 - 而不是在更新时。

如何让 kill_count 和 death_count 在更改值时变白 3 秒？

谢谢

我使用了@PeterAmbruzs 的解决方案，但我似乎收到了奇怪的数字。例如在下图中，首先分数是 0/0/0，第一个数字增加 1。它没有变成 1/0/0，而是变成了 01/0/0。出于某种原因，我的数字也高得离谱。有谁知道为什么会这样？

Answer 1

https://stackblitz.com/edit/react-5sztov?file=index.js

setTimeout() 仍然是一个可行的构造 - 即使在 React 中工作。

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      assistsCount: 0,
      color: 'black',
      deathCount: 0,
      fontWeight: 'normal',
      killCount: 0,
      setStyleToReset: false,
    };
  }

  increaseKillCount () {
    this.setState((prevState, props) => {
      return {
        killCount: prevState.killCount + 1,
        color: 'white',
        fontWeight: 'bold',
        setStyleToReset: true,
      };
    });
  }

  render() {
    if (this.state.setStyleToReset) {
      this.resetStyle();
    }
    return (
      <div>
        <div style={{
          backgroundColor:'green',
        }}>
          <span style={{color:this.state.color, fontWeight:this.state.fontWeight}}>{this.state.killCount}</span>/{this.state.deathCount}/{this.state.assistsCount}
        </div>
        <button onClick={() => this.increaseKillCount()}>Increase Kill Count</button>
      </div>
    );
  }

  resetStyle() {
    setTimeout(() => {
      this.setState({
        color: 'black',
        fontWeight: 'normal',
      });
    }, 3000);
  }
}

render(<App />, document.getElementById('root'));

Answer 2

我也有办法。我认为这很简单。首先，您为动画数字创建一个组件。我将它包装在 react.memo 中，以便仅在其属性更改时更新它。你可以看到它是粗体的，开始时是红色的，但 3 秒后它变成了正常的黑色。但是你可以随心所欲地改变风格。我添加了 skip 属性以防止第一次渲染时出现动画。

const FadeNumber = React.memo(({ value, skip }) => {
  const style = useSpring({
    from: { color: "red", fontWeight: "bold" },
    to: { color: "black", fontWeight: "normal" },
    delay: 3000
  });

  return (
    <animated.span style={{ margin: "10px", ...(skip ? {} : style) }}>
      {value}
    </animated.span>
  );
});

现在有一个技巧可以在属性更改时重新渲染动画。简单地将值放入键中。当键改变时，将创建一个新组件，因此动画将再次播放。我添加了一个唯一的前缀来防止副作用。

<FadeNumber skip={kill === 0} key={"a" + kill} value={kill} />

整个例子：

https://codesandbox.io/s/react-spring-change-fade-out-j8ebk

在反应中更改值后使文本变白？反应-spring？

Make text become white upon changing value in react? React-spring?

javascript

css

animation

reactjs

react-spring