Javascript 使用useState来创建动画

基本上我有以下问题，我有一个状态，开始为假，然后点击为真 每个真态和假态都有不同的动画，但总是在组装组件时，我已经开始动画，我希望只需单击一下即可开始动画

问题:

JSX

const NavMain = () => {
  const [isOpenBox, setOpenBox] = React.useState(false);
  console.log(isOpenBox);
  return (
    <Nav>
      <Container>
        <NavBetween>
          <WrapLogo>a</WrapLogo>
          <NavGrid>
            <NavUl isOpen={isOpenBox}>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <FontAwesomeIcon
                  onClick={() => setOpenBox(!isOpenBox)}
                  className="searchIcon"
                  rotation={90}
                  icon={faSearch}
                  size="1x"
                  fixedWidth
                  color="rgba(0, 0, 0, 0.08);"
                />
              </li>
            </NavUl>
            <SearchWrapper isOpen={isOpenBox}>
              <div className="FlexInput">
                <input placeholder="Pesquisar" />
                <div className="IconContainer">
                  <FontAwesomeIcon
                    onClick={() => setOpenBox(!isOpenBox)}
                    className="searchIcon"
                    icon={faTimes}
                    size="xs"
                    fixedWidth
                    color="black"
                  />
                </div>
              </div>
            </SearchWrapper>
          </NavGrid>
        </NavBetween>
      </Container>
    </Nav>
  );
};

范例

请尝试以下代码-

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import "./styles.css";
import {
  faSearch,
  faAdjust,
  faAngleDown
} from "@fortawesome/free-solid-svg-icons";
import { faTimes } from "@fortawesome/free-solid-svg-icons";
import {
  Container,
  Nav,
  NavBetween,
  WrapLogo,
  NavGrid,
  NavUl,
  SearchWrapper
} from "./styled";

const NavMain = () => {
  const [isOpenBox, setOpenBox] = React.useState(false);

  return (
    <Nav>
      <Container>
        <NavBetween>
          <WrapLogo>a</WrapLogo>
          <NavGrid>
            <NavUl isOpen={isOpenBox}>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <FontAwesomeIcon
                  onClick={() => setOpenBox(!isOpenBox)}
                  className="searchIcon"
                  rotation={90}
                  icon={faSearch}
                  size="1x"
                  fixedWidth
                  color="rgba(0, 0, 0, 0.08);"
                />
              </li>
            </NavUl>
            {isOpenBox && (
              <SearchWrapper>
                <div className="FlexInput">
                  <input placeholder="Pesquisar" />
                  <div className="IconContainer">
                    <FontAwesomeIcon
                      onClick={() => setOpenBox(!isOpenBox)}
                      className="searchIcon"
                      icon={faTimes}
                      size="xs"
                      fixedWidth
                      color="black"
                    />
                  </div>
                </div>
              </SearchWrapper>
            )}
          </NavGrid>
        </NavBetween>
      </Container>
    </Nav>
  );
};

export default NavMain;

从“React”导入React；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
导入“/styles.css”；
进口{
法研究，
faAdjust，
俯冲
}来自“@fortwome/free solid svg icons”；
从“@fortawesome/free solid svg icons”导入{faTimes}”；
进口{
集装箱，
导航，
NavBetween，
WrapLogo，
导航网格，
纳瓦尔，
搜索包装器
}来自“/样式化”；
常量NavMain=（）=>{
const[isOpenBox，setOpenBox]=React.useState（false）；
返回(
A.



















setOpenBox（！isOpenBox）}
className=“searchIcon”
旋转={90}
icon={faSearch}
size=“1x”
固定宽度
color=“rgba（0,0,0,0.08）；”
/>

{isOpenBox&&(
setOpenBox（！isOpenBox）}
className=“searchIcon”
图标={faTimes}
size=“xs”
固定宽度
color=“黑色”
/>
)}
);
};
导出默认NavMain；

您是否尝试只需单击一次即可显示此动画？是的，但我有两个动画要关闭和打开基本上当我关闭它时，我将显示另一个组件，然后当我打开它时，我将使用反向动画显示它，但我怀疑我如何实现这一点是我的live:gabrielcerqueira96

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import "./styles.css";
import {
  faSearch,
  faAdjust,
  faAngleDown
} from "@fortawesome/free-solid-svg-icons";
import { faTimes } from "@fortawesome/free-solid-svg-icons";
import {
  Container,
  Nav,
  NavBetween,
  WrapLogo,
  NavGrid,
  NavUl,
  SearchWrapper
} from "./styled";

const NavMain = () => {
  const [isOpenBox, setOpenBox] = React.useState(false);

  return (
    <Nav>
      <Container>
        <NavBetween>
          <WrapLogo>a</WrapLogo>
          <NavGrid>
            <NavUl isOpen={isOpenBox}>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <FontAwesomeIcon
                  onClick={() => setOpenBox(!isOpenBox)}
                  className="searchIcon"
                  rotation={90}
                  icon={faSearch}
                  size="1x"
                  fixedWidth
                  color="rgba(0, 0, 0, 0.08);"
                />
              </li>
            </NavUl>
            {isOpenBox && (
              <SearchWrapper>
                <div className="FlexInput">
                  <input placeholder="Pesquisar" />
                  <div className="IconContainer">
                    <FontAwesomeIcon
                      onClick={() => setOpenBox(!isOpenBox)}
                      className="searchIcon"
                      icon={faTimes}
                      size="xs"
                      fixedWidth
                      color="black"
                    />
                  </div>
                </div>
              </SearchWrapper>
            )}
          </NavGrid>
        </NavBetween>
      </Container>
    </Nav>
  );
};

export default NavMain;