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

Posted 2023-03-06

【中文标题】如何使用顺风 css 进行页面转换并做出反应？

【英文标题】：How can I make page transitions using tailwindcss & react?

【发布时间】：2021-10-31 19:20:19

【问题描述】：

简单我有两个组件。主页和搜索。 在/ 主页上有一个搜索 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
              
              className="cursor-pointer"
            />
          </Link>

【参考方案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

【讨论】：

它正在工作，greta，但第二次我点击搜索图像时，它正在动画，但离开家时它工作正常。我想这是因为你提到的 afterLeave 。你能告诉我如何解决第二次点击问题吗？谢谢

我真的不明白这是什么问题。请改写预期的行为

当我在搜索 SVG 所在的/ 页面时。在第一次单击时，它会向右移动到中心，这很棒。点击lorem para 它会从中心向右移动。那也很棒。但是当我第二次点击搜索 SVG 时，它并没有转换或动画页面。它不是以动画为中心的权利。这是为什么呢？

那是因为showSearchPage的状态设置为false。修改为：afterLeave=()=> setShowPage(true); history.push(“/“)

所以我应该把这个状态const [showSearchPage, setShowSearchPage] = useState(true);重新定位到父组件吗？