汉堡过渡在反应和 onClick 事件中也不起作用答案

【问题标题】：Hamburger Transitions not working in react and onClick event too汉堡过渡在反应和 onClick 事件中也不起作用
【发布时间】：2021-11-05 17:50:54
【问题描述】：

我的游戏的目标 - 让汉堡图标在点击时显示过渡到十字，然后在再次点击时恢复到其汉堡状态。但我不知道为什么它不起作用请帮忙！！

我希望我的汉堡在我点击时显示给定的过渡。

App.JSX 文件

import Navbar from "./Components/Navbar/navbar";
import Intro from "./Components/Intro/intro";
import About from "./Components/About/about";
import Skills from "./Components/Skills/skill";
import Portfolio from "./Components/portfolio/portfolio";
import Contact from "./Components/Contact/contact";
import "./app.scss";
import { useState } from "react";

function App() {
  const [menuopen, setMenuOpen] = useState(true);
  return (
    <div className="app">
      {/* //Component Calling */}
      <div className="navbar">
        {" "}
        <Navbar menuopen={menuopen} setMenuOpen={setMenuOpen} />
      </div>

      <div className="sections">
        <Intro />
        <About />
        <Skills />
        <Portfolio />
        <Contact />
      </div>
    </div>
  );
}

export default App;

navbar.jsx

import "./navbar.scss";
import PersonIcon from "@material-ui/icons/Person";
import MailIcon from "@material-ui/icons/Mail";

export default function navbar({ menuopen, setMenuOpen }) {
  return (
    <div className={"navbar" + (menuopen && "active")}>
      <div className="wrapper">
        <div className="left">
          <a href="#intro" className="logo">
            nishant.
          </a>
          <div className="itemContainer">
            <PersonIcon className="icon" />
            <span>+91 6386 694 7041</span>
          </div>
          <div className="itemContainer">
            <MailIcon className="icon" />
            <span>yadavnishant995@gmail.com</span>
          </div>
        </div>
        <div className="right">
          <div className="hamburger " onClick={() => setMenuOpen(!menuopen)}>
            <span className="line 1"></span>
            <span className="line 2"></span>
            <span className="line 3"></span>
          </div>
        </div>
      </div>
    </div>
  );
}

导航栏.scss

@import "../../global.scss";

.navbar {
  width: 100%;
  height: 70px;
  background-color: white;
  color: $mainColor;
  position: fixed;
  top: 0;
  z-index: 3;
  transition: all 1s ease;

  .wrapper {
    padding: 10px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .logo {
        font-size: 40px;
        font-weight: 700;
        text-decoration: none;
        color: inherit;
        margin-right: 40px;
      }

      .itemContainer {
        display: flex;
        align-items: center;
        margin-left: 30px;

        .icon {
          font-size: 18px;
          margin-right: 5px;
        }

        span {
          font-size: 15px;
          font-weight: 500;
        }
      }
    }

    .right {
      .hamburger {
        width: 32px;
        height: 25px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;

        span {
          width: 100%;
          height: 3px;
          background-color: $mainColor;
          transform-origin: left;
          transition: all 2s ease;
        }
      }
    }
  }

  &.active {
    background-color: $mainColor;
    color: white;

    .hamburger {
      span {
        &:first-child {
          background-color: white;
          transform: rotate(45deg);
        }
        &:nth-child(2) {
          opacity: 0;
        }
        &:last-child {
          background-color: white;
          transform: rotate(-45deg);
        }
      }
    }
  }
}

【问题讨论】：

不知道是不是这个问题，但是类名"navbar" + (menuopen && "active")之间没有空格。
不，这不是问题
该项目的Github repo链接 - [link] (github.com/yadavNishant2020/portfolio-reactJs)
既然你有 HTML、CSS 和 Javascript，你能提供一个 jsFiddle 或 Codepen 的例子吗？

标签： javascript html css reactjs

【解决方案1】：

如前所述，使用实时示例更容易理解您的代码，但我怀疑它无法正常工作：

<div className={"navbar" + (menuopen && "active")}>

当menuopen 是false 时，类名是："navbarfalse"。当它是true 时，它变成："navbaractive"

navbar 后面显然需要一个空格。我建议你改写：

<div className={`navbar ${menuopen ? "active" : ""}`}>

【讨论】：