Je souhaite créer l'effet suivant:

typefully-effect

Actuellement, j'ai cet effet étrange:

weird animation

J'utilise Transition de @headlessui/react .

Mon code ressemble à:

<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"
>

Comment y parvenir?

5
deadcoder0904 27 févr. 2021 à 10:08

1 réponse

Meilleure réponse

Je l'ai résolu. Il ne montre pas l'animation sur Codesandbox car les animations Tailwind ne fonctionnent pas sur Codesandbox (c'est leur bogue) mais le code est testé localement et cela fonctionne bien.

{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- animé-cbft1

0
deadcoder0904 12 mars 2021 à 11:41