Reactjs 在Reaction中单击并显示子组件延迟动画

我正在try 创建一个组件，该组件在单击时将显示其子组件(S).

我有这样的代码:

type ExpandCollapseProps = ComponentProps<"div"> & VariantProps<typeof expandCollapseStyles> & {
    previewText?: string;
    children: React.ReactNode;
}

export const ExpandCollapse = forwardRef<HTMLDivElement, ExpandCollapseProps>(({ variant, className, children, previewText, ...props }, ref) => {

    const [expanded, setExpanded] = useState<boolean>(false);

    return (
        <div className={cn(expandCollapseStyles({ variant, className }))} ref={ref} {...props} onClick={() => setExpanded(!expanded)}>
            <div className="space-y-2">
                <p className="font-medium">{previewText}</p>

                {expanded &&
                    <div className="">
                        {children}
                    </div>
                }

            </div>
        </div>
    )
});

这工作得很好，点击它实际上会展开/折叠所需的组件.然而，我想使这是一个平稳的过渡，使组件滑下和/或淡入可见性.

解决这一问题的最佳方式是什么？

附带信息:

以下是我在css/Styling (in case anyone knows a solution perhaps utilizing these)中使用的包:

• tailwindcss个
• tailwind-merge个
• class-variance-authority个
• clsx个

⚠️ I do not want to install an external component package that will complete the task for me. I'm trying to learn how to create reusable UI components on my own.

谢谢!