时间戳

首页 > 解决方案 > 使用 Tailwind CSS 使用来自 `@headlessui/react` 的`Transition` 创建自上而下的幻灯片动画

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

问题描述

我想创建以下效果：

类型效应

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

奇怪的动画

我正在使用从.@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"
>

我如何实现它？

标签： javascripthtmlreactjstailwind-css

解决方案

我解决了。它不会在 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

推荐阅读