react js中元素的过渡颜色

Question

我在 React 中有 2 个场景。在场景 1 中，有一个带有计时器的 div，其颜色应从绿色过渡到红色，持续 180 秒。问题是用户可以随时切换到场景 2 并在一段时间后切换回场景 1。所以我需要一种方法来启动动画，而不是从头开始，而是从用户切换到场景 2 后过渡的颜色开始，在那里花了一些时间并切换回场景 1。

例如：

1. 用户打开场景 1
2. 用户在那里停留了 40 秒，颜色变成了橙色
3. 用户切换到场景 2 并在那里停留了 30 秒，然后切换回场景 1

所以我需要一些可以转换颜色的 js 魔法，以便转换从用户在场景 1 上花费 70 秒并且转换时间为 110 秒时会出现的颜色开始。我现在能想到的只是一些可以转换颜色的库，我可以在其中指定转换开始的开始时间（时间或百分比，没关系），但我现在找不到.如果您知道任何其他方式，请告诉我。谢谢！

Answer 1

我以某种方式让一切正常工作。我所做的只是保存并在需要时通过道具获取经过的时间，根据经过的时间计算所需的色调（从 120 - 绿色到 0 - 红色），为改变当前状态的色调的方法创建一个 setTimeout它只会每秒更新 HSL set div color 所需的 div color hue 值。额外的 1s CSS 颜色过渡用于平滑颜色变化。