如何使用顺风css对元素进行平滑转换
如何使用顺风css对元素进行平滑转换
提问于 2021-06-22 16:01:55
我做了一个导航条使用顺风css在next.js，它是响应和工作良好。
每件事情都很正常，但当我点击汉堡按钮时，它会显示列表立即出现，但我想在小屏幕上显示底部(无顺序列表)，平稳过渡，我不知道如何使过渡平稳。
- 我想要的问题的解决办法是使这个列表在屏幕上平滑可见
`
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;回答 3
Stack Overflow用户
发布于 2021-06-30 08:06:59
如果您想要自上而下的下拉动画，请尝试阅读：用CSS转换动画最大高度
您可以尝试使用这些顺风类transition-all max-h-screen max-h-0。
Stack Overflow用户
发布于 2021-06-22 19:29:24
尝尝这个,
我在官方文档中使用了尾风响应设计方法。
这样就可以在sm:或md:中调整className
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>
);
}快乐编码:)
Stack Overflow用户
发布于 2022-07-06 21:25:13
别跟我一样。通过应用md:隐藏在肚脐和汉堡包中的类，您不必检查它是否再次单击以显示ul或navlinks。你应该做的是添加一个负面的翻译-x-满，使它显示在屏幕上，当点击汉堡包时，添加一个翻译-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>)}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68087007
复制相关文章
相似问题
腾讯云开发者
