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

Question

我想创建如下效果：

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

我正在使用 @headlessui/react 的 Transition。

我的代码如下：

<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

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

{theme.type !== "light" && theme.color !== null && (
    <div
        className={`mt-4 mx-2 flex items-center space-x-2 transition-all ease-out duration-700 h-10 ${
            isDarkTheme ? "opacity-100" : "opacity-0"
        }`}
    >
        <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">
            <span>Dim</span>
            <input
                type="radio"
                name="darkOption"
                className="w-4 h-4"
                value="dim"
                checked={theme.color === "dim"}
                onChange={() => {
                    updateTheme({
                        color: "dim",
                    })
                }}
            />
        </label>
        <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">
            <span>Lights Out</span>
            <input
                type="radio"
                name="darkOption"
                className="w-4 h-4"
                value="lights-out"
                checked={theme.color === "lights-out"}
                onChange={() => {
                    updateTheme({
                        color: "lights-out",
                    })
                }}
            />
        </label>
    </div>
)}

Codesandbox → https://codesandbox.io/s/headless-ui-theme-animated-cbft1

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

Create top-down slide animation using `Transition` from `@headlessui/react` using Tailwind CSS

html

javascript

reactjs

tailwind-css