css 尾风显示/隐藏转换

laawzig2 于 2022-12-15 发布在其他

关注(0)|答案(2)|浏览(115)

我正在用tailwindcss制作一个react应用程序，我想做一个隐藏的移动的导航栏，当用户点击图标时，它就会出现。
所以我想在菜单出现的时候做一个过渡。
我用途：

React
尾风
黑德勒叙伊

我的代码：
MobileMenu.js:

function MobileMenu() {
  return (
    <div className="block md:hidden px-4 py-3 text-white w-full bg-gray-800 border-t border-opacity-70 border-slate-700">
      <div className="flex items-center mb-3 pb-3 border-b border-slate-700">
        <img
          src="https://africaprime.com/wp-content/uploads/2020/04/ElonMusk.jpg"
          className="rounded-full w-8 h-8 cursor-pointer"
        />
        <h6 className="ml-5 cursor-pointer">Elon Musk</h6>
      </div>
      <div className="mobile-nav-icon">
        <ImHome size={20} />
        <h4 className="ml-5">Home</h4>
      </div>
      <div className="mobile-nav-icon">
        <HiUsers size={20} />
        <h4 className="ml-5">Friends</h4>
      </div>
      <div className="mobile-nav-icon">
        <CgProfile size={20} />
        <h4 className="ml-5">My Profile</h4>
      </div>
    </div>
  );
}

export default MobileMenu;

我如何在Navbar.js中显示它：

function Navbar() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  return (
    <>
      <nav className="flex justify-between items-center px-4 lg:px-8 py-3 bg-gray-900 text-white">
        {/* Mobile Menu Icon */}
        <div
          className="block md:hidden p-2 cursor-pointer rounded-full hover:bg-gray-700 transition-2"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        >
          <FiMenu size={20} />
        </div>
      </nav>
      {/* Mobile Menu */}
      {mobileMenuOpen && <MobileMenu />}
    </>
  );
}

export default Navbar;

先谢了！

css

来源：https://stackoverflow.com/questions/72982577/tailwindcss-show-hide-transition

2条答案

按热度按时间

gfttwv5a1#

您可以使用@framer/motion包，它允许您轻松地为元素设置动画。

const menuVariants = {
    open: {
      opacity: 1,
      x: 0,
    },
    closed: {
      opacity: 0,
      x: '-100%',
    },
  }

根据@framer/motiondocs.，可以随意更改动画
并将变体附加到<MobileMenu />组件。

function MobileMenu({isMenuOpen}) {
  return (
    <motion.div animate={isMenuOpen ? 'open' : 'closed'}
    variants={menuVariants}> className="block md:hidden px-4 py-3 text-white w-full bg-gray-800 border-t border-opacity-70 border-slate-700">
      <div className="flex items-center mb-3 pb-3 border-b border-slate-700">
        <img
          src="https://africaprime.com/wp-content/uploads/2020/04/ElonMusk.jpg"
          className="rounded-full w-8 h-8 cursor-pointer"
        />
        <h6 className="ml-5 cursor-pointer">Elon Musk</h6>
      </div>
      <div className="mobile-nav-icon">
        <ImHome size={20} />
        <h4 className="ml-5">Home</h4>
      </div>
      <div className="mobile-nav-icon">
        <HiUsers size={20} />
        <h4 className="ml-5">Friends</h4>
      </div>
      <div className="mobile-nav-icon">
        <CgProfile size={20} />
        <h4 className="ml-5">My Profile</h4>
      </div>
    </div>
  );
}

export default MobileMenu;

并且可以将isMenuOpen变量作为prop传递。

function Navbar() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  return (
    <>
      <nav className="flex justify-between items-center px-4 lg:px-8 py-3 bg-gray-900 text-white">
        {/* Mobile Menu Icon */}
        <div
          className="block md:hidden p-2 cursor-pointer rounded-full hover:bg-gray-700 transition-2"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        >
          <FiMenu size={20} />
        </div>
      </nav>
      {/* Mobile Menu */}
      {mobileMenuOpen && <MobileMenu isMenuOpen={mobileMenuOpen}/>}
    </>
  );
}

export default Navbar;

赞(0）回复(0）举报 2022-12-15

rslzwgfq2#

所提供答案的一个潜在问题是状态设置不正确。有关基于先前状态值更新状态的信息，请参阅React文档。

<div className="block md:hidden p-2 cursor-pointer rounded-full hover:bg-gray-700 transition-2" onClick={() => setMobileMenuOpen(prevState => !prevState)}>

赞(0）回复(0）举报 2022-12-15

我来回答

css 尾风显示/隐藏转换

2条答案

相关问题

热门标签

最新问答