如何使用顺风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;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提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68087007
复制相关文章
相似问题
腾讯云开发者
