我正在尝试创建一个可以通过简单的滑动动画展开和折叠的框。如果您运行下面的示例,其想法是它从一个红线开始,当您单击按钮时,它分成两条红线并缓慢扩展以显示内容,就像从桌子上拉出抽屉一样。
我已经尝试了transform、animation、relative: positioning with top等方法,但无法获得所需的效果。
包含框应该扩大大小。
function expandContract() {
const el = document.getElementById("expand-contract")
el.classList.toggle('expanded')
el.classList.toggle('collapsed')
}
#container {
border: 1px solid black;
padding: 15px;
}
#top-section {
border-bottom: 1px solid red;
}
#expand-contract {
border-bottom: 1px solid red;
}
.expand-contract {
transform: translateY(-100%)
overflow: hidden;
}
@keyframes slide-in {
100% {
transform: translateY(0%)
}
}
.expanded {
background-color: green;
animation-name: slide-in;
animation-duration: 1s;
}
.collapsed {
background-color: red;
transform: translateY(-100%)
}
<div id="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-contract" class="expanded">
This section expands and contracts
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
<div id="bottom-section">
This section is always displayed
</div>
</div>
<button onclick="expandContract()">Expand/Contract</button>
margin-top: -100%;
表示-100%
将相对于包含盒子的 宽度 进行计算(在这种情况下,是#expand-container
),因此该技术仅在要显示或隐藏的元素比父元素窄时才能正常工作。请参见:https://dev59.com/fVsW5IYBdhLWcg3wqo0x - Daimargin-top
是容器宽度的 -100%,因此动画需要时间才能变得可见。你的修复将动画持续时间设置为 0,从而有效地禁用了它。 - Herman Kan