当我单击切换按钮时，如何向导航栏菜单添加过渡以做出反应

Question

我在 HTML 和 CSS / Bootstrap 中创建了一个电子商务基础模板。我正在尝试将模板转换为 NextJS 站点的 React 组件，但切换功能最初无法正常工作。我看到我可以使用 React Hooks 来切换类，我已经使用 useState/isActive 实现了这些。汉堡包过渡有效，但实际菜单的过渡无效。

这里是 navbar.js

import Logo from '../images/logo-small-cropped.png'
import Image from 'next/image'
import React, { useState } from "react"

export default function Navbar({ }) {
  
  const [isActive, setActive] = useState("false");
    const handleToggle = () => {
      setActive(!isActive);
  };

  return (
          <nav className="navbar navbar-expand-md navbar-light border-top fixed-top border-bottom py-0" >
            <div className="container-fluid text-center" >
              <a className="navbar-brand" href="#">
                <span className="mb-2">
                  <Image src={Logo} alt="Little Pink Boutique Logo"  />
                </span>
              </a>
              <button onClick={handleToggle} className="navbar-toggler navbar-toggler-button" type="button" aria-label="Toggle navigation">
                <div id="hamburger" className={isActive ? "null" : "open"}>
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </button>
           
              <div className={isActive ? "collapse navbar-collapse" : "navbar-collapse"}  >
                <ul className="navbar-nav me-auto mb-2 mb-md-0">
                  <li className="nav-item">
                    <a className="nav-link active" aria-current="page" href="/home" > </a>
                  </li>
                  <li className="nav-item">
                    <a className="nav-link" href="#">Women</a>
                  </li>
                  <li className="nav-item">
                    <a className="nav-link" href="#">Men</a>
                  </li>
                  <li className="nav-item">
                    <a className="nav-link" href="#">Children</a>
                  </li>
                  <li className="nav-item">
                    <a className="nav-link" href="#">Accessories</a>
                  </li>
                  <li className="nav-item">
                    <a className="nav-link" href="#">FAQs</a>
                  </li>
                  <li className="nav-item">
                    <a className="nav-link" href="#">Contact</a>
                  </li>
     
                </ul>
                <form className="d-flex">
                  <input className="form-control me-2 mt-3 mb-2" type="search" placeholder="Search" aria-label="Search"/>
                  <button className="btn btn-outline-success mt-3 mb-2" type="submit">Search</button>
                </form>
              </div>
             
              
            </div>
          </nav>  
      )
    }

.collapse 类只是标准的 Bootstrap 类，navbar-collapse 类如下。

.navbar-collapse{
  background-color: rgb(238, 236, 236);
  width: 100vw;
}

我不确定如何进行过渡，或者这是否是最好的方法。

一如既往地感谢任何帮助。

Answer 1

尝试在 navbar-collapse 类中使用过渡 css 属性。 像这样的东西：-

.navbar-collapse{
  transition: width 2s;
  background-color: rgb(238, 236, 236);
  width: 100vw;
}