javascript - 在 react 中改变值时使文本变成白色？ react 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

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

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