为什么我不能针对导航进行下拉过渡？

Question

我正在尝试在单击汉堡菜单时激活一个过渡。我的 javascript 和 css 适用于所有内容，但无法创建从上到下的缓慢导航下拉过渡。

试图在网上找到答案让我想到了许多不同的方式来创建过渡。所以我迷失了，如果有标准的方法可以做到这一点，请帮助我。不是想偷懒，但我看到了 5 种不同的方法。不确定我需要在 css 中定位什么。谢谢

<header>
  <button class="hamburger hamburger--squeeze" type="button">
    <span class="hamburger-box">
        <span class="hamburger-inner"></span>
    </span>
  </button>
  <img class="header-logo" src="/logo/piancavallo-logo.svg" alt="">
  <nav>
    <ul class="nav-links">
      <li><a href="index.html">home</a></li>
      <li><a href="shop.html">shop</a></li>
      <li><a href="sport.html">sport</a></li>
      <li><a href="read.html">read</a></li>
      <li><a href="about.html">about</a></li>
    </ul>
  </nav>
  <img class="search-icon" src="/logo/search-icon.svg" alt="">
  <img class="shopping-cart" src="/logo/shopping-cart.svg" alt="">
</header>

nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
}
nav .nav-links {
  display: none;
  background-color: orange;
  font-size: 1.4rem;
  position: absolute;
  width: 100vw;
}
nav .nav-active {
  display: block;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  margin: 5px;
  padding: 5px;
}
nav a {
  text-decoration: none;
  color: green;
  font-weight: 700;
}
nav ul {
  -webkit-transition: height 1s ease-in;
  transition: height 1s ease-in;
}

const revealNav = () => {
  const hamburger = document.querySelector('.hamburger');
  const nav = document.querySelector('.nav-links');

  hamburger.addEventListener('click', () => {
    hamburger.classList.toggle('is-active');
  }, false);

  hamburger.addEventListener('click', () => {
    nav.classList.toggle('nav-active');
  });
}

revealNav();

Answer 1

据我所知，没有标准或更好的方法来执行此操作，这在很大程度上取决于您要达到的视觉效果。

我这里有一个解决方案，我已经删除了 top/bottom 转换不需要的大部分 CSS。

我的不透明度也有一个跳跃，这在开发时可能会有所帮助，因为它会准确显示添加或删除 class 的时间。

const revealNav = () => {
  const hamburger = document.querySelector('.hamburger');
  const nav = document.querySelector('.nav-links');

  hamburger.addEventListener('click', () => {
    nav.classList.toggle('is-active');
  });
}

revealNav();

nav {
  overflow: hidden;
}

.nav-links {
  opacity: 1; /* only to show when class is added */
  background-color: orange;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 1s;
  transform: translateY(-100%);
}

.nav-links.is-active {
  opacity: 1; /* only to show when class is added */
  transform: translateY(0);
}

<header>
  <button class="hamburger hamburger--squeeze" type="button">
    <span class="hamburger-box">
        <span class="hamburger-inner">hamburger</span>
    </span>
  </button>
  <nav>
    <ul class="nav-links">
      <li><a href="index.html">home</a></li>
      <li><a href="shop.html">shop</a></li>
      <li><a href="sport.html">sport</a></li>
      <li><a href="read.html">read</a></li>
      <li><a href="about.html">about</a></li>
    </ul>
  </nav>
</header>

为什么我不能针对导航进行下拉过渡？

Why can't I target the nav for a drop down transition?

javascript

html

css

sass

nav