我正在做一个网页布局，其中我有一个包含可见和隐藏内容的部分.我已经实现了一个按钮，可以使用过渡效果平滑地展开隐藏内容.然而，我面临着两个主要问题:
虽然可扩展的功能工作，过渡效果并不顺利，因为我希望它是.我已经应用了一个CSS转换来更改grid-template-rows属性，但它没有提供所需的平滑度.如何在扩展隐藏内容时实现更平滑的过渡效果？
网格行-间隙保留:我对隐藏的内容使用网格布局，即使元素被隐藏，行间隙似乎也为它们保留了额外的空间，导致布局中的视觉间隙.我想要防止这种对隐藏元素的行间距保留.如何修改我的css以确保行间隙只应用于可见元素，而不应用于隐藏元素？
下面是我的HTML、CSS和JavaScript代码的简化版本: https://codepen.io/korneliuszburian/pen/LYaqyvN
document.addEventListener("DOMContentLoaded", () => {
const button = document.querySelector(".btn__expand");
let currentIndex = 0;
let hiddenGroups = document.querySelectorAll(".cards--hidden");
button.addEventListener("click", function() {
if (currentIndex < hiddenGroups.length) {
hiddenGroups[currentIndex].classList.remove("cards--hidden");
hiddenGroups[currentIndex].classList.add("cards--active");
currentIndex++;
}
if (currentIndex >= hiddenGroups.length) {
button.style.display = "none";
}
});
});body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
padding: 20px;
}
.visible,
.cards--hidden {
margin-bottom: 20px;
padding: 15px;
background-color: #fff;
border: 1px solid #000;
box-shadow: 5px 5px 0px #000;
}
.wrapper {
border: 2px solid #000;
padding: 10px;
min-height: 0;
overflow: hidden;
}
.items {
margin-bottom: 10px;
padding: 10px;
background-color: #e0e0e0;
border: 1px solid #000;
}
.item__title h2 {
font-size: 20px;
margin: 0 0 5px 0;
color: #000;
}
.item__title p {
font-size: 16px;
margin: 0;
color: #333;
}
.cards--hidden {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 300ms ease-in-out;
overflow: hidden;
}
.cards--active {
grid-template-rows: 1fr;
}
.btn__expand {
cursor: pointer;
}<section>
<div class="visible">
<div class="wrapper">
<div class="items">
<div class="item__title">
<h2>Visible Item 1 Title</h2>
<p>Description for Visible Item 1</p>
</div>
</div>
<div class="items">
<h2>Visible Item 2 Title</h2>
<p>Description for Visible Item 2</p>
</div>
<div class="items">
<h2>Visible Item 3 Title</h2>
<p>Description for Visible Item 3</p>
</div>
</div>
</div>
<div class="cards cards--hidden">
<div class="wrapper">
<div class="items">
<div class="item__title">
<h2>Hidden Item 1 Title</h2>
<p>Description for Hidden Item 1</p>
</div>
</div>
<div class="items">
<h2>Hidden Item 2 Title</h2>
<p>Description for Hidden Item 2</p>
</div>
<div class="items">
<h2>Hidden Item 3 Title</h2>
<p>Description for Hidden Item 3</p>
</div>
</div>
</div>
<div class="cards cards--hidden">
<div class="wrapper">
<div class="items">
<div class="item__title">
<h2>Hidden Item 1 Title</h2>
<p>Description for Hidden Item 1</p>
</div>
</div>
<div class="items">
<h2>Hidden Item 2 Title</h2>
<p>Description for Hidden Item 2</p>
</div>
<div class="items">
<h2>Hidden Item 3 Title</h2>
<p>Description for Hidden Item 3</p>
</div>
</div>
</div>
<div class="btn__expand">
<span class="btn__label">Expand all data</span>
</div>
</section>