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

Answer 2

您不能将{em> transition 应用于display属性-您可以 transition scale-参见以下演示：

function view() {
  // add a class to show the element
  document.getElementById('topmenu').classList.add('show');
}

#topbar {
  background-color: yellow;
  overflow: auto;
}

#topmenu {
  transform: scaleY(0); /* scale to zero vertically */
  transform-origin: top; /* set origin to top */
  overflow: hidden;
  transition: transform 1s; /* apply transition to only scale */
}

#topmenu.show {
  transform: scaleY(1); /* scale to full height */
}

<header>
  <div id="topbar">
    <img src="https://via.placeholder.com/50" style="float: left;">
    <span style="float: right;"><a href="#!" onclick="view()">MENU</a></span>
  </div>
  <div id="topmenu">
    some text here
  </div>
</header>

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

2 个答案: