next.js 如何使用顺风css在元素上应用平滑过渡

bbuxkriu 于 2023-04-11 发布在其他

关注(0)|答案(3)|浏览(168)

我在next.js中使用tailwind css做了一个导航栏，它响应迅速，工作正常。

每件事都工作正常，但当我点击汉堡按钮时，它显示列表立即出现，但我想在小屏幕尺寸上显示底部（未排序列表），平滑过渡，我不知道如何使过渡平滑

*我想要的问题的解决方案是让这个列表在屏幕上平滑可见

import React, { useEffect, useState } from "react";

    import { MenuAlt1Icon } from "@heroicons/react/outline";
    
    function Header() {
      const [isOpen, setisOpen] = React.useState(false);
      const [size, setSize] = useState(0);
    
      function handleClick() {
        setisOpen(!isOpen);
      }
      useEffect(() => {
        setSize(window.innerWidth);
        window.addEventListener("resize", handleSize);
        return () => window.removeEventListener("resize", handleSize);
      }, []);
      const handleSize = () => {
        setSize(window.innerWidth);
      };

上面是javascript代码
下面是jsx和顺风

return (
        <header>
          <nav className={` shadow-md  px-5  ${isOpen && size < 640 && "pb-3"}`}>
            <button
              type="button"
              className={`${
                size >= 640 ? "hidden" : "inline-block h-12 focus:outline-none"
              }`}
              onClick={handleClick}
            >
              <MenuAlt1Icon className="h-6 w-6" />
            </button>
    
            <ul
              className={`   ${
                size >= 640
                  ? " flex h-12 items-center space-x-2  "
                  : `${
                      isOpen
                        ? `block space-y-2  border-t-2 border-gray-50 pt-2 transition duration-500 ease-linear`
                        : `hidden`
                    }`
              }`}
            >
              <li>element 1</li>
              <li>element 2</li>
              <li>element 3</li>
              <li>element 4</li>
            </ul>
          </nav>
        </header>
      );
    }
    
    export default Header;

next.js

来源：https://stackoverflow.com/questions/68087007/how-to-apply-smooth-transition-on-the-element-using-tailwind-css

3条答案

按热度按时间

sq1bmfud1#

如果你想要一个从上到下的下拉动画，请尝试阅读：Animating max-height with CSS transitions
您可以尝试使用这些顺风类transition-all max-h-screen max-h-0。

赞(0）回复(0）举报 2023-04-11

uurity8g2#

现在不要像我一样。通过将类md：hidden应用于导航栏和汉堡包，您不必检查它是否再次单击以显示ul或导航链接。您应该做的是添加负-translate-x-full以使其显示在屏幕外，当汉堡包被单击时添加translate-x-0以使其通过滑入屏幕显示。否则侧边栏将不会显示动画
这样做

<ul className={`md:hidden flex flex-col fixed left-0   w-3/4 h-screen top-[60px] bg-green-300 items-center justify-around transition-all ease-in-out duration-200 ${isNavExpanded ? "translate-x-0 " : "-translate-x-full"}`}>
        {links.map((item) => (
          <li key={`link-${item}`} className="nav-link">
            <a href={`#${item}`} className="">
              {item}
            </a>
          </li>
        ))}
      </ul>

而不是这个

{isNavbarExpanded && (<ul className={`md:hidden flex flex-col fixed left-0   w-3/4 h-screen top-[60px] bg-green-300 items-center justify-around transition-all ease-in-out duration-200 ${isNavExpanded ? "translate-x-0 " : "-translate-x-full"}`}>
        {links.map((item) => (
          <li key={`link-${item}`} className="nav-link">
            <a href={`#${item}`} className="">
              {item}
            </a>
          </li>
        ))}
      </ul>)}

赞(0）回复(0）举报 2023-04-11

vuktfyat3#

试试这个
我在官方的Doc中使用了Tailwind响应式设计的方式。
因此您可以在className中调整sm:或md:

import { useState } from "react";
import { MenuAlt1Icon } from "@heroicons/react/outline";

export default function Header() {
  const [isOpen, setisOpen] = useState(false);

  return (
    <header>
      <nav className={"shadow-md px-5 pb-3 sm:pb-0"}>
        <button
          type="button"
          className={"inline-block h-12 focus:outline-none sm:hidden"}
          onClick={() => setisOpen(!isOpen)}
        >
          <MenuAlt1Icon className="w-6 h-6" />
        </button>
        <ul className={`"flex flex-col sm:flex-row w-full h-auto justify-between space-x-2 space-y-2" ${isOpen === false && "hidden sm:flex"}`}>
          <li>element 1</li>
          <li>element 2</li>
          <li>element 3</li>
          <li>element 4</li>
        </ul>
      </nav>
    </header>
  );
}

Happy coding：）

赞(0）回复(0）举报 2023-04-11

我来回答

next.js 如何使用顺风css在元素上应用平滑过渡

3条答案

相关问题

热门标签

最新问答