使用 Tailwind CSS 使用来自 `@headlessui/react` 的 `Transition` 创建自上而下的幻灯片动画

Question

我想创建以下效果：

目前，我有这个奇怪的效果：

我使用转型从@headlessui/react。

我的代码看起来像：

<Transition
    show={app.theme !== 'light'}
    enter="transition ease duration-700 transform"
    enterFrom="opacity-0 -translate-y-full"
    enterTo="opacity-100 translate-y-0"
    leave="transition ease duration-1000 transform"
    leaveFrom="opacity-100 translate-y-0"
    leaveTo="opacity-0 -translate-y-full"
>

我如何实现它？

Answer 1

这就是我为披露面板创建类似动画的方法：

<Transition
    enter="transition ease duration-500 transform"
    enterFrom="opacity-0 -translate-y-12"
    enterTo="opacity-100 translate-y-0"
    leave="transition ease duration-300 transform"
    leaveFrom="opacity-100 translate-y-0"
    leaveTo="opacity-0 -translate-y-12"
 >

Answer 2

我知道这是不久前的事，但我设法做了一些类似于想要的行为的事情。我在 Transition 中包装了一个 Disclosure.Panel 元素：

<Transition
    className="transition-all duration-500 overflow-hidden"
    enterFrom="transform scale-95 opacity-0 max-h-0"
    enterTo="transform scale-100 opacity-100 max-h-96"
    leaveFrom="transform scale-100 opacity-100 max-h-96"
    leaveTo="transform scale-95 opacity-0 max-h-0"
>

如果您的内容高于 max-h-96 （高度：24rem; /* 384px */）。您必须自定义 tailwind 配置以包含更高的 max-h。

您还可以像这样使用 max-h-['number'px] ：

<Transition
    className="transition-all duration-500 overflow-hidden"
    enterFrom="transform scale-95 opacity-0 max-h-0"
    enterTo="transform scale-100 opacity-100 max-h-[1000px]"
    leaveFrom="transform scale-100 opacity-100 max-h-[1000px]"
    leaveTo="transform scale-95 opacity-0 max-h-0"
>

显示动画，质量太糟糕了

Answer 3

我解决了。它不会在 Codesandbox 上显示动画，因为 Tailwind 动画在 Codesandbox 上不起作用（这是他们的错误），但代码在本地进行了测试并且工作正常。

\n

{theme.type !== "light" && theme.color !== null && (\n    <div\n        className={`mt-4 mx-2 flex items-center space-x-2 transition-all ease-out duration-700 h-10 ${\n            isDarkTheme ? "opacity-100" : "opacity-0"\n        }`}\n    >\n        <label className="flex items-center justify-between w-1/2 h-full px-4 py-6 text-lg font-medium leading-4 text-gray-400 border-2 border-gray-800 bg-gray-800 rounded-md cursor-pointer">\n            <span>Dim</span>\n            <input\n                type="radio"\n                name="darkOption"\n                className="w-4 h-4"\n                value="dim"\n                checked={theme.color === "dim"}\n                onChange={() => {\n                    updateTheme({\n                        color: "dim",\n                    })\n                }}\n            />\n        </label>\n        <label className="flex items-center justify-between w-1/2 h-full px-4 py-6 text-lg font-medium leading-4 text-gray-400 border-2 border-gray-800 rounded-md cursor-pointer bg-black">\n            <span>Lights Out</span>\n            <input\n                type="radio"\n                name="darkOption"\n                className="w-4 h-4"\n                value="lights-out"\n                checked={theme.color === "lights-out"}\n                onChange={() => {\n                    updateTheme({\n                        color: "lights-out",\n                    })\n                }}\n            />\n        </label>\n    </div>\n)}\n

\n

Codesandbox \xe2\x86\x92 https://codesandbox.io/s/headless-ui-theme-animated-cbft1

\n