顺风条件转换

Question

我正在创建一个折叠/手风琴组件，该组件在单击时显示内容。我想为该操作添加一点延迟，但我的操作似乎不起作用。这是我所拥有的：

const Accordion = ({ children, open }) => {
  const contentSpace = useRef(null);
  return (
    <div className="flex flex-col">
      <div
        ref={contentSpace}
        className={clsx(
          'overflow-auto overflow-y-hidden h-0 transition-height duration-700 ease-in-out',
          {
            'h-full': open,
          }
        )}
      >
        <div className="py-2">{children}</div>
      </div>
    </div>
  );
};

有什么想法吗？

Answer 1

似乎您必须使用数值才能使动画正常工作。所以我不得不用一个数字高度来改变 h-full。