31.高度过渡 & 带粘性分区标题的列表

文章预览

高度过渡 当元素的高度未知时,将元素的高度从 0 过渡到 auto 。 使用 transition 指定 max-height 的变化应该被过渡。 使用 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.scrollHe ………………………………