How can I make page transitions using tailwindcss & react?-CodePudding

Simple I've a two components. Home and Search. There's a search svg on/ home page. On click of that svg, I want to show the/search. The transition I want is to page to go from right to center. and leave to center to right.
I tried tailwinds @headlessui/react but it's not working for me. Let me know how can I achieve this affect by using tailwind.

import React from "react";
import { Transition } from "@headlessui/react";
import { useState } from "react";
import { Link } from "react-router-dom";

const SearchCategoryPage = () => {
  const [showSearchPage, setShowSearchPage] = useState(true);
  return (
    <Transition
      as="div"
      show={showSearchPage}
      enter="transition-all duration-300"
      enterFrom="transform translate-x-full"
      enterTo="transform translate-x-0"
      leave="transition-all duration-300"
      leaveFrom="transform translate-x-0"
      leaveTo="transform translate-x-full"
      className="fixed bg-black text-white max-w-2xl mx-auto inset-0 z-40 overflow-y-scroll "
    >
      <Link onClick={() => setShowSearchPage(!showSearchPage)} to="/">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
        animi inventore accusantium incidunt deleniti, minima, molestiae libero
        consectetur eligendi, veniam iure eum repellendus. Accusamus, sapiente
        id, voluptatum assumenda sunt totam natus explicabo sit ipsam facere
        optio vitae fugit tempora hic. Id mollitia rerum accusamus accusantium.
        Nulla a nihil fugit aliquam provident porro! Sunt ducimus totam minima
        ipsam illo labore, asperiores animi nemo quo tempora tenetur
        perspiciatis aspernatur error, molestiae delectus consequatur sapiente
        exercitationem esse eaque, suscipit mollitia! Vel sit vitae id eos
        exercitationem? Id veritatis voluptatem facere mollitia, ab ipsum, atque
        voluptatum eos eius illo nam ea consequatur vel inventore?
      </Link>
    </Transition>
  );
};

export default SearchCategoryPage;

home page

          <Link to="/search">
            <img
              src={Search}
              alt="search"
              className="cursor-pointer"
            />
          </Link>

CodePudding user response：

One approach could be:

const SearchCategoryPage = () => {
    const [showSearchPage, setShowSearchPage] = useState(true);
    const history = useHistory()
    return (
        <Transition
            as="div"
            appear={true} //THIS will make the transition run everytime the component is rendered
            show={showSearchPage}
            enter="transition-all duration-300"
            enterFrom="transform translate-x-full"
            enterTo="transform translate-x-0"
            leave="transition-all duration-300"
            leaveFrom="transform translate-x-0"
            leaveTo="transform translate-x-full"
            className="fixed bg-black text-white max-w-2xl mx-auto inset-0 z-40 overflow-y-scroll "
            afterLeave={() => history.push('/')}
        >
            <button onClick={() => setShowSearchPage((prev) => !prev)}>
                    Lorem...
            </button>
        </Transition>
    )
}

As you can see, I've added an history, and an afterLeave function on the Transition component and also changed the link to a button (or anything that has an onClick attribute will work).

This will firstly trigger the leave animation, the an after leave function will run.

appear={true} is necessary in order to trigger the transition on every render.

appear - Whether the transition should run on initial mount. - Headless UI docs

Checkout Transition props from headless ui :) https://headlessui.dev/react/transition