Css

前言 在 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 ...