过渡效果不适用于带有样式组件的 React js 中的移动菜单

Question

我正在尝试构建一个移动菜单，其效果是单击按钮时它会从右侧滑入。滑动工作正常，但它突然打开并关闭，因为过渡对其没有任何影响。在 inspect 元素中显示已检查转换属性但它仍然没有任何效果。下面是我的代码

元素

function Header() {
  const [burgerStatus, setBurgerStatus] = useState(false);

  return (
    <Nav
      initial={{ y: "-100%" }}
      animate={{
        y: 0,
        transition: {
          duration: 0.5,
        },
      }}
    >
      <NavLink to="/">
        <Logo src="/images/logo_name_header.svg" />
      </NavLink>

      <HamburgerButton onClick={() => setBurgerStatus((curr) => !curr)}>
        {burgerStatus ? (
          <i class="fas fa-times-circle"></i>
        ) : (
          <i class="fas fa-bars"></i>
        )}
      </HamburgerButton>

      <NavMenu>
        <ul>
          <li>
            <NavLink activeclassname="acitve" to="/">
              <span>Home</span>
            </NavLink>
          </li>
          <li>
            <NavLink activeclassname="acitve" to="/service">
              <span>Services</span>
            </NavLink>
          </li>

          <li>
            <NavLink activeclassname="acitve" to="/about-us">
              <span>About Us</span>
            </NavLink>
          </li>
          <li>
            <NavLink activeclassname="acitve" to="/contact">
              <span>Contact Us</span>
            </NavLink>
          </li>

          <li>
            <NavLink activeclassname="acitve" to="/register">
              <div className="cta-register">Register</div>
            </NavLink>
          </li>

          <li>
            <NavLink activeclassname="acitve" to="/login">
              <span>Login</span>
            </NavLink>
          </li>
        </ul>
      </NavMenu>
      {burgerStatus && (
        <MobileMenu show={burgerStatus}>
          <NavLink activeclassname="acitve" to="/">
            <span>Home</span>
          </NavLink>

          <NavLink activeclassname="acitve" to="/service">
            <span>Services</span>
          </NavLink>

          <NavLink activeclassname="acitve" to="/about-us">
            <span>About Us</span>
          </NavLink>

          <NavLink activeclassname="acitve" to="/contact">
            <span>Contact Us</span>
          </NavLink>

          <NavLink activeclassname="acitve" to="/register">
            <span>Register</span>
          </NavLink>

          <NavLink activeclassname="acitve" to="/login">
            <span>Login</span>
          </NavLink>
        </MobileMenu>
      )}
    </Nav>
  );
}

export default Header;

样式组件

const Nav = styled(motion.div)`
  user-select: none;
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  height: 4.375rem;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 2rem 1rem;
  border-bottom: 1px solid #dadce0;

  z-index: 20;

  @media (max-width: 480px) {
    padding-inline: 0.5rem;
  }
`;


const MobileMenu = styled.nav`
  /* outline: 1px solid red; */
  font-size: 1rem;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  position: fixed;
  height: 100vh;
  inset: 0 0 0 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: min(30vh, 10rem) 2rem;
  gap: 3rem;
  background: hsl(0deg 0% 33% / 10%);
  backdrop-filter: blur(1.5rem);
  z-index: 16;
  transform: ${(props) => (props.show ? "translateX(0%)" : "translateX(100%)")};
  transition: transform 0.3s ease-out;
  a {
    text-decoration: none;
    span {
      letter-spacing: 0.06rem;
      position: relative;
      color: #000;
    }
  }
  .active {
    span {
      color: #1a73e8;
    }
  }

  @media (min-width: 700px) {
    display: none;
  }
`;

写错的地方请指正

Answer 1

burgerStatus 检查是否导致动画问题

{burgerStatus && (
        <MobileMenu show={burgerStatus}>
          <NavLink activeclassname="acitve" to="/">
            <span>Home</span>
          </NavLink>

          <NavLink activeclassname="acitve" to="/service">
            <span>Services</span>
          </NavLink>

          <NavLink activeclassname="acitve" to="/about-us">
            <span>About Us</span>
          </NavLink>

          <NavLink activeclassname="acitve" to="/contact">
            <span>Contact Us</span>
          </NavLink>

          <NavLink activeclassname="acitve" to="/register">
            <span>Register</span>
          </NavLink>

          <NavLink activeclassname="acitve" to="/login">
            <span>Login</span>
          </NavLink>
        </MobileMenu>
      )}

每当 burgerStatus 更改为 true/false 时，您的整个组件将 re-rendered 立即更新 MobileMenu 显示。

如果您已经在 show={burgerStatus} 上使用

正确处理了 showing/hiding

transform: ${(props) => (props.show ? "translateX(0%)" : "translateX(100%)")};`

您不需要 burgerStatus re-rendering MobileMenu

<MobileMenu show={burgerStatus}>
          <NavLink activeclassname="acitve" to="/">
            <span>Home</span>
          </NavLink>

          <NavLink activeclassname="acitve" to="/service">
            <span>Services</span>
          </NavLink>

          <NavLink activeclassname="acitve" to="/about-us">
            <span>About Us</span>
          </NavLink>

          <NavLink activeclassname="acitve" to="/contact">
            <span>Contact Us</span>
          </NavLink>

          <NavLink activeclassname="acitve" to="/register">
            <span>Register</span>
          </NavLink>

          <NavLink activeclassname="acitve" to="/login">
            <span>Login</span>
          </NavLink>
        </MobileMenu>

过渡效果不适用于带有样式组件的 React js 中的移动菜单

transition effect is not working for mobile menu in react js with styled components

css

reactjs

styled-components