状态更改期间功能组件大小的平滑动画

Question

如您所见，通过单击下方的组件，我们可以更改其大小。我想在这些尺寸之间进行过渡。 CSSTransition 可以吗？

export const Liste_planete2 = () => {
    const [height, setHeight] = useState<number>(30)

    const handleClick=()=>{
            setHeight(height+30)
    }
    return(
        <div style={{height:height}} onClick={handleClick}>
            Text
        </div>
    )
}

Answer 1

试一试：

export const Liste_planete2 = () => {
    const [height, setHeight] = useState<number>(30)

    const handleClick=()=>{
            setHeight(height+30)
    }
    return(
        <div style={{height:height, transition: "all 0.5s"}} onClick={handleClick}>
            Text
        </div>
    )
}

状态更改期间功能组件大小的平滑动画

smooth animation of the size of a functional component during state change

reactjs

reactcsstransitiongroup