在React中，我如何在状态改变、重新加载或重新渲染时应用CSS过渡?

Question

假设我有一个具有一些简单状态的React功能组件:

import React, { useState } from 'react'
import { makeStyles } from "@material-ui/core"
export default function Basket() {
const [itemCount, setItemCount] = useState<number>(0)
return (
<div>
<Count count={itemCount} />
<button onClick={() => setItemCount(itemCount + 1)}>
Add One
</button>
</div>
)
}
function Count({count}: {count: number}) {
const classes = useStyles()
return (
<div className={classes.count}>
{count}
</div>
)
}
const useStyles = makeStyles({
count: {
backgroundColor: "yellow",
transition: "backgroundColor 2s ease"  // ???
}
}

我希望Count组件在count更改时应用属性，然后再次删除它;例如，打开backgroundColor: yellow2秒，然后在1秒内逐渐淡出。实现这一点最简单的方法是什么?

请注意，这可能是由父上的状态更改触发的。或者通过重新呈现子。或者，我可以将key属性添加到<Count/>，以强制重新挂载子:

<Count 
key={itemCount} 
count={itemCount} 
/>

这些都是可以接受的;我正在寻找最简单，最干净的解决方案，希望一个不需要额外的状态，并与材料ui样式api兼容。

Answer 1

只是个主意。

const Component = () => {
useEffect(() => {
// will trigger on component mount
return () => {
// will trigger on component umount
}
}, [])
}
...
document.getElementById('transition').classList.add('example')

您可以使用useEffect与useRef一起包含对元素的引用，或者直接使用document获取它。getElementById，然后在组件挂载/卸载中以这种方式更新转换类。我不确定它是否有效，我还没有自己测试过。