动态高度的平滑过渡

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索如何在元素高度未知的情况下,使其高度从 0 平滑过渡到 auto。此技术对于创建下拉菜单、手风琴和其他动画内容很有用。通过使用 CSS 的 transitionmax-heightoverflow 属性,以及 JavaScript 动态设置高度值,我们可以创建无缝且视觉上吸引人的用户体验。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/ResponsiveandAdaptiveDesignGroup(["`Responsive and Adaptive Design`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css(("`CSS`")) -.-> css/CSSPreprocessorsGroup(["`CSS Preprocessors`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("`Mobile First Design`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") css/CSSPreprocessorsGroup -.-> css/variables("`Variables`") css/CSSPreprocessorsGroup -.-> css/nesting("`Nesting`") subgraph Lab Skills css/selectors -.-> lab-35207{{"`动态高度的平滑过渡`"}} css/width_and_height -.-> lab-35207{{"`动态高度的平滑过渡`"}} css/pseudo_classes -.-> lab-35207{{"`动态高度的平滑过渡`"}} css/mobile_first_design -.-> lab-35207{{"`动态高度的平滑过渡`"}} css/transitions -.-> lab-35207{{"`动态高度的平滑过渡`"}} css/variables -.-> lab-35207{{"`动态高度的平滑过渡`"}} css/nesting -.-> lab-35207{{"`动态高度的平滑过渡`"}} end

高度过渡

虚拟机中已经提供了 index.htmlstyle.css

以下代码片段通过执行以下步骤,在元素高度未知时将其高度从 0 过渡到 auto

  • 使用 transition 属性指定对 max-height 的更改应在 0.3 秒 的持续时间内进行过渡。
  • overflow 属性设置为 hidden,以防止隐藏元素的内容溢出其容器。
  • 使用 max-height 属性指定初始高度为 0
  • 使用 :hover 伪类将 max-height 更改为由 JavaScript 设置的 --max-height 变量的值。
  • 使用 Element.scrollHeight 属性和 CSSStyleDeclaration.setProperty() 方法将 --max-height 的值设置为元素的当前高度。
  • 注意:此方法会在每个动画帧上导致重排,当过渡元素下方有大量元素时,可能会导致延迟。
<div class="trigger">
  悬停在我上面以查看高度过渡。
  <div class="el">附加内容</div>
</div>
.el {
  transition: max-height 0.3s;
  overflow: hidden;
  max-height: 0;
}

.trigger:hover > .el {
  max-height: var(--max-height);
}
let el = document.querySelector(".el");
let height = el.scrollHeight;
el.style.setProperty("--max-height", height + "px");

请点击右下角的“上线”以在端口 8080 上运行网络服务。然后,你可以刷新“Web 8080”标签页以预览网页。

总结

恭喜你!你已经完成了高度过渡实验。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程