javascript - 如何为动态渲染中包含的 React 组件设置动画

Question

我正在开发一个允许我搜索我的数据库的反应组件。我有更高级的搜索条件，我想在面板中包含这些条件。为此，我有一个名为“单击我”的按钮，单击该按钮会打开一个抽屉以显示更多信息。当单击单击我按钮时，我将状态布尔值更新为 true，这会导致面板重新呈现并显示抽屉。我的问题是，如何为这个基于状态变化动态呈现的 jsx 设置动画？我希望抽屉具有滑出效果的动画。我的问题是，由于这个 div 在 state 等于 true 之前不在 DOM 中，所以动画似乎不起作用......

这是我的面板的 GIF：

</p>

这是我试图让它工作的一些代码：

function useDelayUnmount(isMounted, delayTime) {
    const [shouldRender, setShouldRender] = useState(false);

useEffect(() => {
  let timeoutId;
  if (isMounted && !shouldRender) {
    setShouldRender(true);
  } else if (!isMounted && shouldRender) {
    timeoutId = setTimeout(() => setShouldRender(false), delayTime);
  }
  return () => clearTimeout(timeoutId);
}, [isMounted, delayTime, shouldRender]);
return shouldRender;


}

// render
{sidebarClicked && shouldRenderAdditionalInfo && (
        <div
          className="DevSearch__additional-search-criteria"
          style={sidebarClicked ? mountedStyle : unmountedStyle}
        >
          Additional Search Criteria
        </div>
      )}

这是一个代码沙箱的链接，可以查看我的代码： 我的代码沙箱

标签： javascriptreactjssass