CODEWITHSUNDEEP
reactjstailwind-cssheadless-ui
R2-D2
R2-D2

Reputation: 3

headlessui/react transition duration not working

I am using "@headlessui/react": "^1.7.18" and I am trying to implement a smooth Transition for a checkIcon to appear when an item is selected, similar to this example.

I got a transition working but it is quite quick ( duration-200 ) and I want a longer one, something like a second for both enter and leave but is ignoring the duration-1000 and I don't know why.

I created this sandbox for you guys to take look/play.

See below the JSX part.

or if can be done with pure tailwind is good as well.

Any help is appreciated.

<div>
      <div className="leading-6 text-gray-900">Pick one or more</div>
      {fields.map((option) => (
        <div
          key={option}
          onClick={() => handleSelect(option)}
          className={`flex items-center p-2 border cursor-pointer ${
            selected.includes(option)
              ? "border-blue-300 bg-blue-50 hover:border-blue-400"
              : "border-gray-300 bg-white hover:border-gray-400"
          }`}
        >
          <Transition
            show={selected.includes(option)}
            as={Fragment}
            enter="transition ease-out duration-1500"
            enterFrom="opacity-0 -translate-x-2"
            enterTo="opacity-100 translate-x-0"
            leave="transition ease-in duration-1200"
            leaveFrom="opacity-100 translate-x-0"
            leaveTo="opacity-0 -translate-x-2"
          >
            <CheckIcon className="h-4 w-4 text-blue-600" />
          </Transition>
          <span
            className={`ml-2 ${
              selected.includes(option) ? "text-blue-600" : ""
            }`}
          >
            {option}
          </span>
        </div>
      ))}
    </div>

Upvotes: 0

Views: 80

Answers (1)

R2-D2
R2-D2

Reputation: 3

Found a solution. Basically, removed Transition component from headless Ui and manually implemented with tailwind, here is the relevant code incase anyone is interested

{fields.map((option) => (
          <div
            key={option}
            onClick={() => handleSelect(option)}
            className={`inline-flex items-center p-2 border cursor-pointer transition-all duration-300 ${
              selected.includes(option)
                ? "border-blue-300 bg-blue-50 hover:border-blue-400"
                : "border-gray-300 bg-white hover:border-gray-400"
            }`}
          >
            {/* The icon container */}
            <div
              className={`transition-all duration-700 ease-out transform ${
                selected.includes(option)
                  ? "opacity-100 translate-x-0"
                  : "opacity-0 -translate-x-2"
              }`}
            >
              {selected.includes(option) && (
                <CheckIcon className="h-4 w-4 text-blue-1000" />
              )}
            </div>

            {/* The text element with margin to simulate translate */}
            <span
              className={`transition-all duration-700 ease-out ${
                selected.includes(option) ? "ml-2 text-blue-1000" : "ml-0"
              }`}
            >
              {option}
            </span>
          </div>
        ))}

Upvotes: 0

Related Questions