如何解决在自动高度尺寸上使用 CSS 过渡
我正在制作一个可折叠面板,问题在于 [data-panel]
在设置为 height: 100%
时没有保持 css 过渡。它适用于固定高度,即 height: 150px
,但保持高度动态很重要,因为我不知道里面内容的可用空间。我不想修改 html
或 js
但我愿意接受建议...
Codepen: css
中第 44
行的问题
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>
解决方法
这里已经回答了一个重复的问题: 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;
}
,
我想出了一个让我引以为豪的解决方案;然而,它并不完美。让它工作的主要技巧是给 [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;
}
我正在回答我自己的问题;但是,我不接受它作为选择的答案。我希望看到更多独特的解决方案添加到此线程中。
,简短的回答是你不能。高度过渡仅适用于为其高度属性使用基于单位的值的元素。
这里有一篇文章详细介绍了实现相同结果的不同技术:https://css-tricks.com/using-css-transitions-auto-dimensions/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。