从顶部滑入的导航栏

如何解决从顶部滑入的导航栏

Github Repository

更新

我需要找到一种方法来使此过渡处理程序在ontransitionend上执行，因为现在还不是

<nav 
  id='dropDown'
  aria-hidden={!open}
  ontransitionend = {() => {
    if (!open){
      style = {...style,marginTop: 0}  
    }
  }}
  style={style}
  {...props}
>
  {children}
</nav>

在此之后，您可以忽略其余的问题。

---

如果您看下面的图片，您会看到我有一个导航栏，当单击右侧的菜单按钮时，该导航栏就会滑入。如果用户滚动，则导航栏会向后滑动。问题是，如果用户向上滚动太快，则导航下拉列表仍然可见，并且无法正确滑动。我知道我可以将导航栏显示设置为无，但是动画仍然无法正确显示。

---

这是我正在使用的代码。我无法让它在堆栈溢出软件中运行，但是如果您想运行它，可以从Github存储库下载代码。我使用create-react-app初始化了项目

import React,{useState,useEffect,useRef} from 'react'
import './App.css';

const logo = "logo"

const Burger = ({ open,setOpen,...props }) => {

  return (
    <button  aria-label="Toggle menu" aria-expanded={open} onClick={() => setOpen(!open)} {...props}>
      <span />
      <span />
      <span />
    </button>
  )
  
}

const BurgerMenu = ({ open,navHeight=60,children,...props }) => {

  let style = {
    display: 'flex',flexDirection: 'column',justifyContent: 'center',textAlign: 'left',padding: '2rem',backgroundColor: 'gray',position: 'absolute',marginTop: window && open ? navHeight + window.pageYOffset : 0,transform: open ? `translateY(0)` : `translateY(-100%)`,top: 0,right: 0,transition: 'transform 0.3s ease-in-out',}


  return (
    <nav style={style} aria-hidden={!open} {...props}>
      {children}
    </nav>
  )
}

const Navbar = () => {
  
  const [open,setOpen] = useState(false);
  const node = useRef();

  const hideBar = () => {
    setOpen(false)
  }

  useEffect(() => {
    hideBar()
    window.addEventListener("scroll",hideBar,{ passive: true });
    return () => {
      window.removeEventListener("scroll",hideBar);
    };
  },[]);

  const style={
      display: 'flex',width: '100%',background: 'white',height: 80,position: "fixed",zIndex: 50,transition: ".3s"
  }

  return (
    <div ref={node}>  
      <BurgerMenu open={open}>
        <a href="/">link1</a>
          <a href="/">link2</a>
          <a href="/">link3</a>
          <a href="/">link4</a>
          <a href="/">link5</a>
          <a href="/">link6</a>
      </BurgerMenu>
      <nav
        style={style}
      >
        <Burger open={open} setOpen={setOpen} />
      </nav>
    </div>
  )
}

const ReactLogoAndStuff = () => (
  <header className="App-header">
    
    <img src={logo} className="App-logo" alt="logo" />
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
)

function App() {

  return (
    <div className="App">
    <Navbar />
      <ReactLogoAndStuff />
      <ReactLogoAndStuff />
      <ReactLogoAndStuff />
      <ReactLogoAndStuff />
    </div>
  );
}



export default App;

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}








button{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: auto 30px auto auto;
}

span {
  width: 2rem;
  height: 0.25rem;
  background: #0D0C1D;
  border-radius: 10;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

---

更新

通过将以下内容添加到我的BurgerMenu样式中，我几乎可以使事情工作

height: open ? 'unset' : navHeight,transition: 'height 0.3s ease-in-out,transform 0.3s ease-in-out'