<分区>
到目前为止，我有一个按钮，当单击时会出现一个列表，如果再次单击该列表会关闭，但它非常机械且不流畅，我将在此处向您展示。我只想了解如何在有人单击按钮时进行平滑漂亮的过渡。
这是片段。
document.getElementById("show-list").onclick = function() {
var l = document.getElementById('List');
if (l.style.display == '') {
l.style.display = 'block';
} else {
l.style.display = '';
}
};#List {
display: none;
list-style-type: none;
}<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>最佳答案
这是一种使用 css 转换来做到这一点的方法:
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';
}
};#List {
height: 0;
opacity: 0;
list-style-type: none;
transition: all 500ms ease-in-out;
}<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>关于javascript - 如何使列表平滑过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45623168/