Question

我正在制作一个带有响应式导航栏的汉堡菜单，当单击“汉堡包”图标时，该菜单会切换导航栏。我正在尝试使用CSS中的transition属性使Nav菜单的下拉列表更平滑。但是切换时的过渡没有变化。

我曾尝试向导航栏添加height属性，但是仍然没有过渡。

var toggleButton = document.querySelector('.toggle-btn');
var navLinks = document.querySelector('.nav-main');

toggleButton.addEventListener('click', function() {
  navLinks.classList.toggle('hidden');
});

.navbar {
  background: #000;
  font-size: 26px;
  font-family: 'Play', sans-serif;
  padding-top: 35px;
  padding-bottom: 20px;
}

.nav-main {
  display: none;
}

.nav-main li {
  list-style: none;
  text-align: center;
  margin: 10px auto;
}

.nav-links {
  text-decoration: none;
  color: #F5F5F5;
}

.nav-links:hover {
  color: #E6E6E6;
}

.toggle-btn {
  position: absolute;
  top: 15px;
  right: 35px;
  cursor: pointer;
  color: #F5F5F5;
}

.toggle-btn:hover {
  color: #E6E6E6;
}

.hidden {
  display: block;
}

<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>

<nav class="navbar">
  <span class="toggle-btn"><i class="fas fa-bars"></i></span>
  <ul class="nav-main">
    <li><a href="#" class="nav-links">Home</a></li>
    <li><a href="#" class="nav-links">Portfolio</a></li>
    <li><a href="#" class="nav-links">About</a></li>
    <li><a href="#" class="nav-links">Blog</a></li>
    <li><a href="#" class="nav-links">Contact</a></li>
  </ul>
</nav>

Answer 1

要通过过渡为高度设置动画，应更改max-height属性。您可以在此处查看此示例：https://codepen.io/felipefialho/pen/ICkwe

针对您的情况：

1）将max-height: 0设置为.nav-main

2）将max-height: ${your max height value here}设置为.nav-main--open

3）更改此行navLinks.classList.toggle('nav-main--open');

可能对您有用。

Answer 2

受此帖子启发：https://stackoverflow.com/a/25544161/2777988

我使用了一个标签和一个隐藏的复选框来实现平滑的线性过渡。甚至不需要任何Javascript。

#block {
  background: #000;
  height: 0;
  overflow: hidden;
  transition: height 300ms linear;
  font-size: 26px;
  font-family: 'Play', sans-serif;
}

label {
  cursor: pointer;
}

#showblock {
  display: none;
}

#showblock:checked+#block {
  height: 240px;
}

.navbar {
  background: #000;
  font-size: 26px;
  padding-top: 35px;
  padding-bottom: 10px;
  font-family: 'Play', sans-serif;
}

.nav-main {
  display: block;
}

.nav-main li {
  list-style: none;
  text-align: center;
  margin: 10px auto;
}

.nav-links {
  text-decoration: none;
  color: #F5F5F5;
}

.nav-links:hover {
  color: #E6E6E6;
}

.toggle-btn {
  position: absolute;
  top: 15px;
  right: 35px;
  cursor: pointer;
  color: #F5F5F5;
}

.toggle-btn:hover {
  color: #E6E6E6;
}

.hidden {
  display: block;
}

<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet" />
<nav class="navbar">
  <span class="toggle-btn"><label for="showblock" class="fas fa-bars"></label></span>
</nav>
<input type="checkbox" id="showblock" />
<div id="block">
  <ul class="nav-main">
    <li><a href="#" class="nav-links">Home</a></li>
    <li><a href="#" class="nav-links">Portfolio</a></li>
    <li><a href="#" class="nav-links">About</a></li>
    <li><a href="#" class="nav-links">Blog</a></li>
    <li><a href="#" class="nav-links">Contact</a></li>
  </ul>
</div>

切换后如何使响应式导航栏中的汉堡菜单平滑过渡？

2 个答案: