Question

我有一个父元素，在其中确定变量的真/假状态

const [showSettings, setShowSettings] = useState(false);

根据父元素中元素的点击来更新状态，并为子元素提供适当的道具：

<CreateTitle buttonText="Submit" renderElement={showSettings} />

我最初有条件地渲染了CreateTitle，但是注意到更新后的状态没有传递给CreateTitle，这是有道理的，因为它没有在false上渲染。

我将条件渲染移至CreateTitle元素本身（条件元素渲染的最佳实践是什么？）：

return props.renderElement ? (
   <section className="settingsBox">...</section>
) : null;

这很重要的原因是因为我在settingsBox上有一个属性，即：

 animation: slide-down 0.7s ease;
    @keyframes slide-down {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

我正在使用React的新useEffects钩子来捕获状态变化：

useEffect(() => {
    const settingsBox = document.querySelector('.settingsBox');
    if (settingsBox) {
        settingsBox.style.animation = 'slide-up 0.7s ease;';
    }
});

当用户单击元素时，应用程序将呈现一个包含各种输入的settingsBox div。通过道具创建动画效果可以简化外观，但是当我尝试切换样式以简化设置框时，JS或CSS似乎有问题； settingsBox会立即消失并且不容易。这篇文章中未显示的是100％-0％的反向关键帧代码。

如何最好地实现动画反转以减轻settingsBox的负担？

条件渲染的子级不会切换css.animation

0 个答案: