前言

图解1

在 CSS 中，我们经常需要处理元素的高度过渡问题。例如，当元素的内容发生变化时，我们需要动态地调整元素的高度，以适应新的内容。但是，如果直接设置元素的高度，可能会导致元素的高度过渡不自然，甚至出现闪烁的现象。因此，我们需要使用一些技巧来处理高度过渡问题。

使用 transition 属性

在 CSS 中，我们可以使用 transition 属性来处理元素的高度过渡问题。transition 属性可以指定元素在一段时间内平滑地过渡到新的状态。例如：

.element {
  transition: height 0.5s ease;
}

在这个例子中，我们指定了元素的高度在 0.5 秒内平滑地过渡到新的状态。ease 是一个缓动函数，它可以使过渡更加自然。

使用 max-height 属性

项目地址 1

在 CSS 中，我们可以使用 max-height 属性来限制元素的最大高度。例如：

.element {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

在这个例子中，我们指定了元素的最大高度为 0，并且隐藏了元素的内容。当元素的内容发生变化时，我们可以通过 JavaScript 来动态地调整元素的最大高度，以适应新的内容。例如：

function toggleElement() {
  var element = document.getElementById("element");
  if (element.style.maxHeight === "0px") {
    element.style.maxHeight = element.scrollHeight + "px";
  } else {
    element.style.maxHeight = "0px";
  }
}

使用 height:auto 属性

项目地址 2

在 CSS 中，我们可以使用 height:auto 属性来让元素的高度自动适应内容。例如：

.element {
  height: auto;
  transition: height 0.5s ease;
}

const btn = document.querySelector(".btn");

const content = document.querySelector(".content");

btn.onmouseenter = () => {
  content.style.height = "auto";
  const h = content.offsetHeight;
  content.style.height = "0px";

  //让浏览器强制渲染
  //读取任何几何位置信息，都可触发 浏览器强制渲染一次

  content.offsetHeight;
  content.style.transition = "0.5s";
  content.style.height = h + "px";
};

btn.onmouseleave = () => {
  content.style.transition = "0.5s";
  content.style.height = "0px";
};

新的特性 实验方案

项目 3

/* 特性1  */

/* .content {
  width: 200px;
  height: 0;
  overflow: hidden;
  background: #f40;
  color: #fff;
  transition: 0.5s;
} */

/* 浏览器兼容性 */
/* .btn:hover + .inner .content {
  height: calc-size(auto, size);
} */

/* 特性2 */
.content {
  width: 200px;
  height: 0;
  overflow: hidden;
  background: #f40;
  color: #fff;
  transition: 0.5s;
  interpolate-size: allow-keywords;
}
.btn:hover + .inner .content {
  height: auto;
}

总结

通过使用 transition 属性、max-height 属性和 height:auto 属性，我们可以处理元素的高度过渡问题，使元素的高度过渡更加自然。同时，我们还可以使用一些新的 CSS 特性来处理高度过渡问题，例如 interpolate-size、calc-size 等 特性。