如何在 React 中的特定状态值的重新渲染之间添加过渡？

Question

我在 React 和 Sass 项目中有以下代码：

<header className="App-header" style={{backgroundColor: accentColour, color: accentColour}}>

accentColour 是之前使用 useState() 定义的，因此当我设置 AccentColour(newcolour) 时，React 将背景重新渲染为新颜色。我的问题是，如何在不同颜色之间添加颜色过渡 - 这样当 accentColour 改变时，一种背景颜色可以平滑地过渡到下一种背景颜色？

Answer 1

你可以做的是类似这样的事情：

<header className="App-header" style={{ backgroundColor: `${accentColor}`, transitionDuration: '500ms' }}>

如何在 React 中的特定状态值的重新渲染之间添加过渡？

How can I add a transition between re-renders of a specific state value in React?

javascript

css

reactjs

css-transitions