javascript - 在 React 中为有条件渲染的组件设置动画

Question

我有一个功能组件，它根据道具是否未定义来呈现 div X 或 divY。

功能组件：

const InfoHeader = (props) => {
    const {population, infected, recovered, deaths, active} = props
    
    return(
        //check if props are undefined
        !(Object.values(props).every(element => element !== undefined))
        ? 
        <div className="infoHeader-landing">
            ///render this div if props are undefined
        </div>
        : 
        <div className="infoHeader-wrapper">
           ///render this if props are not undefined
        </div>
    )
}

export default InfoHeader

当用户登陆页面时，道具将始终未定义，直到他/她与地图的一部分进行交互。infoHeader-landing一旦用户点击地图的一部分，我基本上想动画出来。

InfoHeader我已经尝试在父组件上设置一个动画状态，一旦用户单击地图并有条件地为我想要动画的 div 提供一个类名，它就会呈现并将其设置为 true。就像是

<div className={props.animate ? "infoHeader-landing-slideOut" : "infoHeader-landing"}/>

我认为这是因为我正在重新渲染整个组件，因此动画不适用，但我不确定如何在这种情况下达到我的目标，可能使用 useEffect?。

动画将非常简单，例如：

.infoHeader-landing-slideOut {
    animation-name: slideUp;
    animation-duration: 1s;
}

@keyframes slideUp {
    from {
        height: 30%;
    }

    to {
        height: 0%;
    }
}

任何帮助都会很棒，

谢谢

标签： javascriptcssreactjsanimationconditional-rendering