javascript - 在没有 jQuery 的情况下将 div 滑入外观

Question

我在链接上使用 onclick 方法来显示 div。但是，它不会滑动，只是出现。如何在不使用 jQuery 的情况下使其显示为幻灯片效果。我不想使用 jQuery 的原因是因为我希望页面加载尽可能快。

function view() {
  document.getElementById('topmenu').setAttribute('style', 'display:block');
}

#topbar {
  background-color: yellow;
  overflow: auto;
}

#topmenu {
  display: none;
}

<header>
  <div id="topbar">
    <img src="/images/santorini-wedding-photographer-logo.png" style="float: left;">
    <span style="float: right;"><a href="#!" onclick="view()">MENU</a></span>
  </div>
  <div id="topmenu">
    some text here
  </div>
</header>

Answer 1

可以使用 Javascript 来完成 setInterval() 和 clearInterval() 函数。 请在此处查看代码示例 JavaScript slidedown without jQuery