在自动高度尺寸上使用CSS过渡

Question

我正在制作一个可折叠面板，问题是[data-panel]在设置为height: 100%时不保持css过渡。它适用于固定高度，即height: 150px，但重要的是保持高度动态，因为我不知道里面的内容的可用空间。我宁愿不修改html或js，但我愿意接受建议…

Codepen:css44行问题
https://codepen.io/oneezy/pen/bGBpXaW

function activeLinks() {

document.addEventListener('click', e => {
let linkEl = e.target.closest('[data-link]');

if (linkEl) {
let url                         = linkEl.dataset.link;
let linkEls                 = document.querySelectorAll('[data-link]');
let ActivelinkEls   = document.querySelectorAll(`[data-link="${url}"]`);

// remove "active" class from all links
Array.from(linkEls).forEach( (el) => {
el.classList.remove('active');
});

// add "active" class to all matching links
Array.from(ActivelinkEls).forEach( (el) => {
let prevLink            = el.parentElement.previousElementSibling;
let prevPrevLink    = el.parentElement.parentElement.previousElementSibling;

el.classList.add('active'); 

if (prevLink && prevLink.dataset.link) {
prevLink.classList.add('active');
prevLink.parentElement.classList.add('active');
}

if (prevPrevLink && prevPrevLink.dataset.link) {
prevPrevLink.classList.add('active');
prevPrevLink.parentElement.classList.add('active');
}
});
}

});
}
activeLinks();

/* Reset 
*********************************/
* { margin: 0; padding: 0; box-sizing: border-box; font-family: roboto; }
html, body { height: 100%; overflow-x: hidden; }
a { text-decoration: none; display: block; }

/* Layout 
*********************************/
#page { display: grid; grid-template-columns: 160px 1fr; gap: 3rem; height: 100%; }
#nav { background: black; display: block; align-items: start; align-content: start; justify-content: stretch; padding: 2rem 1rem; }
#main { display: flex; justify-content: space-around; padding: 2rem 5rem 0 0;  }

/* Navigation 
*********************************/
/* Sections */
#nav .link-level__one   { margin: 1rem 0; }
#nav .link-level__two   {  }
#nav .link-level__three { position: relative; }
#nav .link-level__three::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; width: 100%; background: gray; }
/* Links */
#nav .link-level__one a { padding: .25rem .5rem; color: gray; font-weight: 900; }
#nav .link-level__one a.active { color: white; }
#nav .link-level__two a { padding: .25rem .5rem; color: gray; font-weight: normal; }
#nav .link-level__two a.active { color: white; }
#nav .link-level__three a { padding: .25rem .5rem; color: gray; }
#nav .link-level__three a.active { color: white; font-weight: normal; }

/* Main 
*********************************/
#main section {  }
#main a { color: black; padding: 1rem .5rem; }
#main a.active { background: blue; color: white; }

/* Panel 
*********************************/
[data-panel]                        { height: 0; overflow: hidden; transition: .22s .22s ease-in-out; }
.active ~ [data-panel]  { height: 150px; } /* I NEED THIS TO BE DYNAMIC HEIGHT! */

<div id="page">
<nav id="nav">

<!-- LINK 1 
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
<!-- LEVEL 1 -->
<section class="navigation-links__wrapper link-level__one">
<a href="#link1" data-link="link1">Link 1</a>

<!-- LEVEL 2 -->
<section class="link-level__two" data-panel>
<a href="#link1a" data-link="link1a">Link 1a</a>

<!-- LEVEL 3 -->
<section class="link-level__three" data-panel>
<a href="#link1a-1" data-link="link1a-1">Link 1a-1</a>
<a href="#link1a-2" data-link="link1a-2">Link 1a-2</a>
<a href="#link1a-3" data-link="link1a-3">Link 1a-3</a>
</section>
</section>
</section>

<!-- LINK 2 
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
<!-- LEVEL 1 -->
<section class="navigation-links__wrapper link-level__one">
<a href="#link2" data-link="link2">Link 2</a>

<!-- LEVEL 2 -->
<section class="link-level__two" data-panel>
<a href="#link2a" data-link="link2a">Link 2a</a>

<!-- LEVEL 3 -->
<section class="link-level__three" data-panel>
<a href="#link2a-1" data-link="link2a-1">Link 2a-1</a>
<a href="#link2a-2" data-link="link2a-2">Link 2a-2</a>
<a href="#link2a-3" data-link="link2a-3">Link 2a-3</a>
</section>
</section>
</section>

<!-- LINK 3 
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
<!-- LEVEL 1 -->
<section class="navigation-links__wrapper link-level__one">
<a href="#link3" data-link="link3">Link 3</a>

<!-- LEVEL 2 -->
<section class="link-level__two" data-panel>
<a href="#link3a" data-link="link3a">Link 3a</a>

<!-- LEVEL 3 -->
<section class="link-level__three" data-panel>
<a href="#link3a-1" data-link="link3a-1">Link 3a-1</a>
<a href="#link3a-2" data-link="link3a-2">Link 3a-2</a>
<a href="#link3a-3" data-link="link3a-3">Link 3a-3</a>
</section>
</section>
</section>

</nav>
<main id="main">
<section>
<h2>Link Level 1</h2>
<a href="#link1" data-link="link1">Link 1</a>
<a href="#link2" data-link="link2">Link 2</a>
<a href="#link3" data-link="link3">Link 3</a>
</section>
<section>
<h2>Link Level 2</h2>
<a href="#link1a" data-link="link1a">Link 1a</a>
<a href="#link2a" data-link="link2a">Link 2a</a>
<a href="#link3a" data-link="link3a">Link 3a</a>
</section>
<section>
<h2>Link Level 3</h2>
<a href="#link1a-1" data-link="link1a-1">Link 1a-1</a>
<a href="#link1a-2" data-link="link1a-2">Link 1a-2</a>
<a href="#link1a-3" data-link="link1a-3">Link 1a-3</a>
<a href="#link2a-1" data-link="link2a-1">Link 2a-1</a>
<a href="#link2a-2" data-link="link2a-2">Link 2a-2</a>
<a href="#link2a-3" data-link="link2a-3">Link 2a-3</a>
<a href="#link3a-1" data-link="link3a-1">Link 3a-1</a>
<a href="#link3a-2" data-link="link3a-2">Link 3a-2</a>
<a href="#link3a-3" data-link="link3a-3">Link 3a-3</a>
</section>
</main>
</div>

Answer 1

这是一个重复的问题，这里已经回答过了:我怎么能过渡高度:0;到高度:auto;使用CSS呢?

你可以使用一个更大的max-height来达到这个目的。

#menu #list {
max-height: 0;
transition: max-height 1s ease-out;
overflow: hidden;
background: #d5d5d5;
}
#menu:hover #list {
max-height: 1000px;
transition: max-height 1s ease-in;
}

Answer 2

我想出了一个令我自豪的解决方案;然而，它并不完美。让它工作的主要技巧是给[data-panel]一个line-height: 0，并在它变成活动时转换它(仅行高)。此外，您还需要确保[data-panel]的内容没有任何边距或填充(直到面板变得活跃)，否则它将完全脱离UI。

https://codepen.io/oneezy/pen/bGBBEmp

/* Panel 
*********************************/
[data-panel] {
overflow: hidden;
line-height: 0;
opacity: 0;
pointer-events: none;
transition: line-height .22s ease-in-out;
}
.active + [data-panel] {
line-height: 1.4;
opacity: 1;
pointer-events: auto;
}

我在回答我自己的问题;然而，我不接受它作为选择的答案。我希望看到更多独特的解决方案添加到这个线程。

Answer 3

简短的回答是你不能。高度转换只会作用于那些使用单位为基础的Height属性值的元素。

这里有一篇文章详细介绍了实现相同结果的不同技术:https://css-tricks.com/using-css-transitions-auto-dimensions/