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

Question

简单我有两个组件。主页和搜索。 在/ 主页上有一个搜索 svg。点击那个svg，我想显示/search。 我想要的过渡是从右到中的页面。并离开中心到右边。
我试过顺风@headlessui/react，但它对我不起作用。让我知道如何使用顺风实现这种效果。

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 函数，并将链接更改为按钮（或任何具有 onClick 属性的东西都可以使用）。

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

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

appear - 过渡是否应该在初始装载时运行。 - 无头 UI 文档

从 headless ui 结帐过渡道具 :) https://headlessui.dev/react/transition