Question

我有以下HTML标记和CSS来构建导航菜单：

.submenu {
  max-height: 0;
  overflow-y: hidden;
  transition: max-height 0.3s ease-in;
}
.submenu.opened{
  max-height: 200px;
}

<ul class="navigation navigation-main navigation-accordion">
  <li><a href="#">Dashboard</a></li>
  <li>
    <a href="#">Products</a>
    <ul class="submenu">
      <li>All Products</li>
      <li>Popular Products</li>
    </ul>
  </li>
</ul>

我使用JavaScript切换opened上的课程submenu。借助过渡，submenu在点击时上下滑动。但我希望过渡尽可能顺利。

有人可以帮我改进上面的CSS代码，使其尽可能顺利，因为如果快速连续点击产品链接，它就不能正常工作。

Answer 1

我想每个人都有另一个 smooth 的定义，但我会从这里开始，将缓动函数从ease-in更改为ease-in-out，而不是仅仅使用过渡。 0.3s 在这种情况下有点快，增加持续时间，直到它适合你。以下是持续时间为1.5秒的示例：

＆＃13;

document.querySelector('#prod').addEventListener('click', function() {
  document.querySelector('.submenu').classList.toggle('opened');
}, false);

＆＃13;

.submenu {
  max-height: 0;
  overflow-y: hidden;
  transition: max-height 1.5s ease-in-out;
}

.submenu.opened{
  max-height: 200px;
}

body {
  font-size: 1.5em;
  font-family: sans-serif;
  line-height: 1.7
}

＆＃13;

<ul class="navigation navigation-main navigation-accordion">
  <li><a href="#">Dashboard</a></li>
  <li>
    <a href="#" id="prod">Products</a>
    <ul class="submenu">
      <li>All Products</li>
      <li>Popular Products</li>
    </ul>
  </li>
</ul>

＆＃13;

使CSS高度过渡更平滑

1 个答案: