React中点击并显示子组件延迟/动画

Question

我正在尝试创建一个组件，单击该组件将显示其子组件。

我有这个代码：

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/样式设计的包 （如果有人知道可能使用这些的解决方案）：

• tailwindcss

• tailwind-merge

• class-variance-authority

• clsx

⚠️我不想想要安装一个外部组件包来完成我的任务。我正在尝试学习如何自己创建可重用的 UI 组件。

谢谢！

Answer 1

有关条件渲染元素动画的简短说明

卸载/安装组件会使动画变得更加困难 元素。虽然从技术上讲，您可以通过为元素设置键并为元素编写 CSS 动画来实现它，但在卸载元素时很难为其设置动画。

您还可以研究 Framer Motion 来为组件的退出和进入设置动画。

这是您可以解决此问题的另一种方法。

---

而不是安装和卸载孩子。您可以将它们包装在容器中并正确设置它们的样式，以符合您的可见和隐藏条件。您仍然可以在没有条件的情况下渲染子项，但您可以根据条件更改样式。

这是一个简单的示例，使用 Tailwind 和 CLSX 有条件地将样式应用于子级。您可以自定义以实现您想要的动画。

import clsx from 'clsx';

function Component() {
    return (
      <div>
        {/* Other siblings */}
            <div className={clsx('max-h-0 transition-all ...', // default classnames
                isExpanded && 'max-h-[100px]' // classnames when expanded
            )}>{children}</div>
      </div>
    );
}