Question

到目前为止，我点击了一个按钮，如果再次单击列表会显示一个列表，但是它非常符合机器人而且不顺畅，我会告诉你。我想了解当有人点击按钮时如何进行平滑过渡。

以下是摘录。

＆＃13;

document.getElementById("show-list").onclick = function() {

  var l = document.getElementById('List');
  if (l.style.display == '') {
    l.style.display = 'block';
  } else {
    l.style.display = '';
  }

};

＆＃13;

#List {
  display: none;
  list-style-type: none;
}

＆＃13;

<button id="show-list">Menu</button>
<ul id="List">Algorithms
  <li>Palindromes</li>
  <li>Factorialize Function</li>
  <li>Reverse A String</li>
  <li>Longest Word In String</li>
  <li>Title Case</li>
  <li>Return Largest Number In Array</li>
</ul>

＆＃13;

Answer 1

以下是使用css过渡的方法：

＆＃13;

document.getElementById("show-list").onclick = function() {

  var l = document.getElementById('List');
  if (l.style.height == 0) {
    l.style.height = 'auto';
    l.style.opacity = '1';
  } else {
    l.style.height = '0';
    l.style.opacity = '0';
  }

};

＆＃13;

#List {
  height: 0;
  opacity: 0;
  list-style-type: none;
  transition: all 500ms ease-in-out;
}

＆＃13;

<button id="show-list">Menu</button>
<ul id="List">Algorithms
  <li>Palindromes</li>
  <li>Factorialize Function</li>
  <li>Reverse A String</li>
  <li>Longest Word In String</li>
  <li>Title Case</li>
  <li>Return Largest Number In Array</li>
</ul>

＆＃13;

Answer 2

您可能想要查看一些框架。 jQuery免费提供，并扩展了Javascript，为您提供了大量功能。使用jQuery构建了大量免费可用的框架，比如Bootstrap和Semantic-UI，我确保为您提供您正在寻找的功能。

例如，

Semantic-UI在进行整洁的幻灯片转换时非常容易：

$("#myElement").transition("slide down");

jQuery还通过jQuery UI扩展了功能;请记住，jQuery和jQuery-UI是两个独立的实体。 jQuery-UI是从jQuery构建的。也许来自jQuery-UI的Accordion动画可能符合您的需求。

如何顺利过渡列表

2 个答案: