使用 CSS 将高度从 0 过渡到自动

使用 CSS 将高度从 0 过渡到自动
使用 CSS 将高度从 0 过渡到自动
Gabriel Martim
2024年7月12日星期五 下午6:18:53

使用 CSS 创建平滑的高度过渡

由于缺少 auto 值的定义端点，使用 CSS 将元素的高度从 0 转换为 auto 可能具有挑战性。这通常会导致元素突然出现，而没有平滑的过渡效果。

在这篇文章中，我们将探讨如何实现一个平滑的下滑效果 使用 CSS 过渡的元素。我们将研究常见问题并提供解决方案，以在不依赖 JavaScript 的情况下创建无缝过渡。

命令 描述
overflow: hidden; 隐藏溢出到元素框之外的所有内容。用于管理高度转换期间的内容可见性。
transition: height 1s ease; 使用缓动计时功能在 1 秒内对 height 属性应用平滑过渡效果。
scrollHeight 返回元素的整个高度，包括不可见的溢出内容。在 JavaScript 中用于计算动态高度。
addEventListener('mouseenter') 将事件处理程序附加到“mouseenter”事件，该事件在鼠标指针进入元素时触发。用于启动高度过渡。
addEventListener('mouseleave') 将事件处理程序附加到“mouseleave”事件，该事件在鼠标指针离开元素时触发。用于反转高度过渡。
style.height 在 JavaScript 中直接设置元素的高度。用于动态调整高度以实现平滑过渡。
:root 与文档根元素匹配的 CSS 伪类。用于定义全局 CSS 变量。
var(--max-height) 引用 CSS 变量。用于在过渡期间动态分配最大高度。

了解 CSS 中的平滑高度过渡

第一个脚本演示了将元素高度从 0 转换到指定高度的纯 CSS 方法。通过使用 overflow: hidden; 属性，任何超出元素高度的内容都会被隐藏，确保干净的过渡。这 transition: height 1s ease; 属性对超过 1 秒的高度应用平滑过渡效果。当将鼠标悬停在父元素上时，子元素的高度会更改为预定值，从而产生向下滑动的错觉。但是，此方法要求您提前知道元素的最终高度。

第二个脚本结合了 JavaScript 来动态调整元素的高度。当父元素悬停在上方时，脚本使用以下方法计算内容的完整高度 scrollHeight 并将该值设置为 style.height 子元素的属性。这确保了从高度 0 到完整内容高度的平滑过渡，而无需提前知道最终高度。这 addEventListener('mouseenter') 和 addEventListener('mouseleave') 函数用于处理鼠标悬停事件，确保当鼠标离开父元素时高度转换回 0。

CSS 高度过渡的高级技术

第三个脚本利用 CSS 变量来管理高度过渡。通过定义全局变量 :root 对于最大高度，我们可以在悬停状态下动态地将这个值分配给子元素。变量 var(--max-height) 用于在 CSS 中设置高度，确保过渡平滑并适应内容的变化。这种方法结合了 CSS 的简单性和动态值的灵活性，使管理和根据需要更新过渡高度变得更加容易。

这些方法中的每一种都针对将元素高度从 0 转换为 auto 的问题提供了不同的解决方案。纯 CSS 方法很简单，但受到预定义高度需求的限制。 JavaScript 方法提供了更大的灵活性，允许动态高度计算，但需要额外的脚本。 CSS 变量技术提供了一个中间立场，将易用性与动态功能结合起来。通过理解和利用这些技术，开发人员可以在其 Web 项目中创建平滑、具有视觉吸引力的高度过渡。

使用 CSS 将高度从 0 平滑过渡到自动

CSS 和 HTML

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: 100px; /* Set this to the max height you expect */
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

用于平滑高度过渡的 JavaScript 解决方案

HTML、CSS 和 JavaScript

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>
<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  parent.addEventListener('mouseenter', () => {
    child.style.height = child.scrollHeight + 'px';
  });
  parent.addEventListener('mouseleave', () => {
    child.style.height = '0';
  });
</script>

使用 CSS 变量平滑高度过渡

CSS 和 HTML

<style>
  :root {
    --max-height: 100px;
  }
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: var(--max-height);
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

探索 CSS 动画以实现平滑过渡

除了过渡高度之外，CSS 动画还提供了一种创建平滑视觉效果的通用方法。 CSS 动画允许您对高度以外的各种属性进行动画处理，包括不透明度、变换和颜色。通过定义关键帧，您可以控制动画的中间步骤，从而产生更复杂且更具视觉吸引力的过渡。例如，您可以将高度过渡与淡入效果结合起来，以创建更加动态和引人入胜的用户体验。 CSS 中的关键帧规则允许您指定动画的开始和结束状态，以及任意数量的中间状态，从而使您能够对动画过程进行细粒度控制。

CSS 动画的另一个方面是能够使用animation-delay 属性对多个动画进行排序。此属性允许您错开不同动画的开始时间，从而创建分层效果。例如，您可以首先进行元素的高度过渡，然后进行颜色更改，然后进行变换旋转。通过精心编排这些动画，您可以创建复杂且精美的用户界面。此外，CSS 动画可以与 CSS 转换相结合来处理离散和连续的状态变化，为打造交互式 Web 体验提供全面的工具包。

有关 CSS 过渡和动画的常见问题解答

  1. 如何使用 CSS 将高度从 0 转换为自动？
  2. 为了实现这一点，您可以结合使用固定高度和 JavaScript 动态设置高度值。纯CSS解决方案是有限的，因为 height: auto 不能直接设置动画。
  3. CSS 中的过渡和动画有什么区别？
  4. CSS 转换提供了一种将属性值平滑地（在给定的持续时间内）从一种状态更改为另一种状态的方法，通常是在悬停等状态更改时。 CSS 动画允许使用关键帧定义状态和时间来实现更复杂的序列。
  5. 我可以对具有动态高度的元素使用 CSS 过渡吗？
  6. 是的，但您通常需要提前计算高度或使用 JavaScript 动态设置高度值以实现平滑过渡。
  7. 目的是什么 overflow: hidden; CSS 转换中的属性？
  8. 这 overflow: hidden; 属性用于隐藏超出元素边界的任何内容，这对于涉及高度变化的干净过渡至关重要。
  9. 怎么办 keyframes 从事 CSS 动画工作？
  10. Keyframes CSS 动画中的 CSS 允许您定义动画期间各个元素的状态。您可以在每个关键帧指定属性及其值，从而创建复杂的动画。
  11. 我可以结合 CSS 过渡和动画吗？
  12. 是的，结合 CSS 过渡和动画可以通过处理状态更改和连续动画来提供更丰富的用户体验。
  13. 什么是 scrollHeight 在 JavaScript 中？
  14. scrollHeight 返回元素的总高度，包括由于溢出而在屏幕上不可见的内容。它对于计算平滑过渡的动态高度很有用。
  15. 如何 animation-delay 工作？
  16. 这 animation-delay 属性指定动画何时开始。它允许您对多个动画进行排序以获得分层效果。
  17. 为什么是 :root 在CSS中使用？
  18. 这 :root 伪类以文档的根元素为目标。它通常用于定义可在整个样式表中重复使用的全局 CSS 变量。

关于平滑高度过渡的最终想法

在 CSS 中实现从高度 0 到自动的平滑过渡需要结合多种技术。虽然纯 CSS 提供了简单性，但它受到预定义高度需求的限制。通过集成 JavaScript，您可以动态计算和设置高度，从而提供无缝过渡。利用 CSS 变量还可以提供一种灵活的方法来管理动态值。结合这些方法，开发人员可以创建更具交互性和吸引力的 Web 体验，而不会出现通常与高度转换相关的突然变化。