如何使用网格布局平滑地动画缩放div

Question

我有一个包含一些单元格的网格布局。当div显示或隐藏时，它应该随着时间的推移逐渐缩放。当前显示时，div最初的大小是适合内容的，然后缩放。隐藏时，除非设置了填充，否则会立即隐藏。然后立即将其大小调整为填充的大小。

示例如下所示。如何调整样式，使div平滑地调整大小，文本保持原位(剪辑而不换行(

function toggle() {
if (document.getElementsByClassName("ovdInfobox")[0].classList.contains("ovdInfobox--visible")) {
document.getElementsByClassName("ovdInfobox")[0].classList.remove("ovdInfobox--visible")
console.log('remove');
} else {
document.getElementsByClassName("ovdInfobox")[0].classList.add("ovdInfobox--visible")
console.log('add');
}
}

.ovdInfobox {
display: grid;
grid: 40px auto / auto auto;
z-index: 1;
position: absolute;
top: 50px;
width: 0;
height: 0;
min-width: 0;
min-height: 0;
overflow: hidden;
padding: 0;
border: 0;
background: rgba(255, 255, 255, 0.98);
border-radius: 4px;
font-family: inherit;
font-size: inherit;
line-height: inherit;
transition: all 4.2s ease-in-out;
background: green;
}

.ovdInfobox--visible {
width: unset;
height: unset;
min-width: 300px;
border: 1px solid #d1d1d1;
/*  padding: 15px 15px 15px 15px;*/
}
.ovdInfobox__header {
grid-column-start: span 2;
color: #c20063;
font-size: 18px;
font-weight: normal;
}
.ovdInfobox__label {
font-weight: bold;    
}
.ovdInfobox__data {}

<div>
<button onclick="toggle()">
Click Me!
</button>
<div class="ovdInfobox ovdInfobox--visible" onCLick="toggle()">
<div class="ovdInfobox__header">Details</div>
<div class="ovdInfobox__label">
label
</div>
<div class="ovdInfobox__data">
data
</div>
<div class="ovdInfobox__label">
label
</div>
<div class="ovdInfobox__data">
data
</div>
</div>
</div>

Answer 1

新的一天，新的开始，新的思想。

通过用max-width和max-height替换width、height、min-width和min-height，更改了类.ovdInfobox和.ovdInfobox--visible。现在按预期调整大小。

function toggle() {
if (document.getElementsByClassName("ovdInfobox")[0].classList.contains("ovdInfobox--visible")) {
document.getElementsByClassName("ovdInfobox")[0].classList.remove("ovdInfobox--visible")
console.log('remove');
} else {
document.getElementsByClassName("ovdInfobox")[0].classList.add("ovdInfobox--visible")
console.log('add');
}
}

.ovdInfobox {
display: grid;
grid: 40px auto / auto auto;
column-gap:10px ;
row-gap: 5px;
z-index: 1;
position: absolute;
top: 50px;
max-width: 0;
max-height: 0;
overflow: hidden;
padding: 0;
border: 0;
background: rgba(255, 255, 255, 0.98);
border-radius: 4px;
font-family: inherit;
font-size: inherit;
line-height: inherit;
transition: all 4.2s ease-in-out;
background: green;
}

.ovdInfobox--visible {
max-width: 300px;
max-height: 200px;
border: 1px solid #d1d1d1;
padding: 15px 15px 15px 15px;
}
.ovdInfobox__header {
grid-column-start: span 2;
color: #c20063;
font-size: 18px;
font-weight: normal;
}
.ovdInfobox__label {
font-weight: bold;    
}
.ovdInfobox__data {}

<div>
<button onclick="toggle()">
Click Me!
</button>
<div class="ovdInfobox ovdInfobox--visible" onCLick="toggle()">
<div class="ovdInfobox__header">Details</div>
<div class="ovdInfobox__label">
label
</div>
<div class="ovdInfobox__data">
data
</div>
<div class="ovdInfobox__label">
label
</div>
<div class="ovdInfobox__data">
data
</div>
</div>
</div>