如何使用顺风 css 在元素上应用平滑过渡答案

【问题标题】：how to apply smooth transition on the element using tailwind css如何使用顺风 css 在元素上应用平滑过渡
【发布时间】：2021-09-06 06:02:24
【问题描述】：

我在 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和tailwind

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 tailwind-css

【解决方案1】：

如果您想要一个从上到下的下拉动画，请尝试阅读：Animating max-height with CSS transitions

您可以尝试使用这些顺风类transition-all max-h-screen max-h-0。

【讨论】：

【解决方案2】：

试试这个，

我在官方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>
  );
}

编码愉快:)

【讨论】：

很抱歉，您能告诉我您从我的问题中得到了什么信息吗？
我的响应式设计工作正常，但是当我单击导航栏小屏幕上的汉堡按钮时，我希望从上到下以慢动作平滑地显示列表项
抱歉@JsWizard 不工作。你能在你的IDE上试试吗？
@UsamaAbdulRazzaq 我试图实现你的目标，但没有 JS。所以我推荐使用Headless UI，查看这个链接headlessui.dev/react/menu#basic-example，你可以自定义它。