如何在状态更改之间添加淡入淡出转换

Question

我有一个组件，每次更改状态值时，我都希望它在不同的颜色之间褪色，而不是直接更改。我该如何做到这一点？

const Header = (props) => {
const [headerColor, setHeaderColor] = useState('#c8e9e6');
useEffect(() => {
document.addEventListener("scroll", () => {
console.log(window.scrollY);
if (window.scrollY < 700) {
setHeaderColor('#c8e9e6');

} else if (window.scrollY >= 700 && window.scrollY < 1500) {

setHeaderColor('#ffae5a');
} else if (window.scrollY >= 500) {
setHeaderColor('#b48fff');
}
});
});
return (
<div className={classes.HeaderContainer} style={{
backgroundColor: headerColor,
}```);
}

Answer 1

您可以使用属性transition&-添加一个css类作为转换webkit-transition

例如，在2秒钟后将颜色设置为橙色：

.transaition{
background-color: #ffae5a;
-webkit-transition: background-color 2s; /* For Safari 3.1 to 6.0 */
transition: background-color 2s;
}