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

Question

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

Codepen: 问题在线 44 in css
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

这是一个已在此处回答的重复问题： How can I transition height: 0; to height: auto; using CSS?

您可以使用比以往更大的最大高度来完成此操作。

#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

简短的回答是你不能。高度转换仅适用于对其高度属性使用基于单位的值的元素。

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