如何使用 tailwindcss 进行页面转换并做出反应？

Question

很简单，我有两个组件。主页和搜索。 / 主页上有一个搜索 svg。单击该 svg，我想显示 /search。我想要的过渡是翻页从右到中。并离开中心向右。
我试过 tailwinds @headlessui/react 但它对我不起作用。让我知道如何使用 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;

首页

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

Answer 1

一种方法可以是：

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>
    )
}

如您所见，我在 Transition 组件上添加了一个历史记录和一个 afterLeave 函数，并将 link 更改为一个按钮（或者任何具有 onClick 属性的东西都可以）。

这将首先触发离开动画，离开后的功能将运行。

appear={true} 是必要的，以便在每次渲染时触发过渡。

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

从 headless ui 中检查 Transition 道具 :) https://headlessui.dev/react/transition

如何使用 tailwindcss 进行页面转换并做出反应？

How can I make page transitions using tailwindcss & react?

css

animation

transition

reactjs

tailwind-css