<分区>
如何在此扩展列表上添加过渡效果？
<div class="container">
<div class="outerBG">
<div class="innerBG">
<h2 class="info">➤ Show text</h2>
<ul id="infoContent" style="display:none">
<li>TEST 1 TEST 1 TEST 1 TEST 1</li>
<li>TEST 2 TEST 2 TEST 2 TEST 2</li>
</ul>
</div>
</div>
</div>
我正在使用 JavaScript 切换 UL 的显示:
function expand () {
infoContent.style.display = infoContent.style.display === 'none' ? '' : 'none';
}
是否可以由此制作过渡效果？
jsfiddle:https://jsfiddle.net/mqy2c80u/
最佳答案
您不能使用 display: none 将元素设置为动画。
但是，您可以更新 expand 函数，将类从 open 更改为 close，如下所示:
JavaScript 更改:
function expand () {
infoContent.className = infoContent.className === 'open' ? 'close' : 'open';
}
然后使用 max-height 应用 CSS 动画(如果动画 div 中的内容是动态的):
CSS 添加:
#infoContent {
margin: 0; // Remove the margins
overflow: hidden;
}
#infoContent.close {
max-height: 0; // Set max height to zero
transition: max-height 0.3s ease;
}
#infoContent.open {
max-height: 300px; /* Set max height as big as you think it will ever go */
transition: max-height 0.3s ease;
}
演示: JSFiddle
关于javascript - 扩大 UL 的过渡效应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30401002/