Javascript CSS展开/收缩动画以显示/隐藏内容

我正在尝试创建一个可以通过简单的滑出动画来展开和折叠的长方体。如果您运行下面的示例，其想法是它从一条红线开始，当您单击按钮时，它将分成两条读取线，并轻轻展开以显示内容，就像从表中拉出一张图一样

我尝试了变换、动画、相对：用顶部定位，但我无法获得想要的效果

包含框的大小应扩大

函数expandContract（）{
const el=document.getElementById（“扩展合同”）
el.classList.toggle（'expanded'）
el.classList.toggle（'折叠'）
}

#容器{
边框：1px纯黑；
填充：15px；
}
#顶部{
边框底部：1px纯红；
}
#扩大合同{
边框底部：1px纯红；
}
.扩大合同{
转换：translateY（-100%）
溢出：隐藏；
}
@关键帧滑入{
100% {
转换：translateY（0%）
}
}
.扩大{
背景颜色：绿色；
动画名称：滑入；
动画持续时间：1s；
}
.崩溃{
背景色：红色；
转换：translateY（-100%）
}

这将始终显示
本节扩展和收缩
测试1
测试2
测试3
测试4
始终显示此部分
展开/收缩

您可以使用CSS

转换

以及切换样式来实现这一点。最初，您可能会考虑转换高度（从

0

到

initial

，以便根据高度动态扩展），但不幸的是，CSS

转换

无法正确处理此问题

相反，您可以使用

overflow:hidden

将其包装在自己的容器中，然后使用

margin top:-100%

将其隐藏，然后使用

0

将其显示

以下是经过此修改的代码：

函数expandContract（）{
const el=document.getElementById（“扩展合同”）
el.classList.toggle（'expanded'）
el.classList.toggle（'折叠'）
}

#容器{
边框：1px纯黑；
填充：15px；
}
#顶部{
边框底部：1px纯红；
}
#扩展容器{
溢出：隐藏；
}
#扩大合同{
边框底部：1px纯红；
利润率最高：-100%；
过渡：所有1；
}
#扩展合同{
背景颜色：绿色；
边际上限：0；
}

这将始终显示
本节扩展和收缩
测试1
测试2
测试3
测试4
始终显示此部分
展开/收缩

希望能帮助您

HTML

<div class="container">
    <div id="top-section">
      This is always displayed
    </div>
   <div id="expand-container">
    <div class="expanded" id="expand-contract">
         <table>
            <tr><td>test1</td></tr>
            <tr><td>test2</td></tr>
            <tr><td>test3</td></tr>
            <tr><td>test4</td></tr>
        </table>
    </div>
  </div>
</div>
<button class="header" onclick="expandContract()">Expand/Contract</button>

js

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .expanded {
    display: none;
    padding : 5px;
}

function expandContract() {
    $header = $(".header");
    $content = $("#expand-contract")
    $content.slideToggle(500, function () {
        $header.text(function () {
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });
};

---

请参见此处

当我收缩长方体，然后单击“展开”时，在展开之前会有1000毫秒的延迟。。知道是什么原因吗？转换：所有1s>>都会增加1秒延迟。。将此更改为转换：1s所有0s；使用

页边距顶部进行修正：-100%

表示

-100%

将根据包含框的宽度（在本例中为

#expand container

）进行计算，因此只有当要显示或隐藏的元素短于父元素的宽度时，此技术才可以接受。请看这里：