不定高度元素如何产生动画效果

Author Avatar
饶英俊（Royin） 10月 26, 2021

前言

一般对某个元素设置 css 从 heigth: 0 到 height: auto 添加过渡动画却没有动画效果，这是为什么

高度的特性

块级元素，行内块级元素的高度默认是由内容撑起的，而行内元素不支持设置高度，下文都是针对块级元素，行内块级元素等可以设置高度的元素的讲解。

为什么将高度设置为 auto、none 无法产生过渡动画

过渡动画无法识别 auto、none 等非数值属性值

不定高元素高度变化产生过渡动画的办法

  • 使用固定的数值作为属性值

    例如 500px、10%、20em 等，都可以产生过渡动画

    弊端：如果内容的高度是动态不确定的，高度可能不足以包括内容或者产生多余的高度。例如一篇文章可能有短的有长的，高度写死可能不太好。

  • 使用 max-height 属性代替 height

    1. 首先需要隐藏高度的时候使用 max-height：0 代替 height: 0。因为最大高度为 0，高度不可能超过最大高度，所以只能为 0

    2. 接着在需要显示高度的时候将 max-heigt 的属性值设为恒大于内容高度的值即可。例如 999px、9999px 等。

    关于 max-height 的工作原理

    当 max-height 增大到相等于由内容撑起的高度值时，元素高度就不会再增大了，即使 max-height 继续增长到大于内容的高度，因为元素的实际高度永远满足实际高度 小于等于 最大高度
    。举个例子，已知某元素的高度为 height:200px，其 max-height 由 max-height: 0 过渡到 max-height: 300px ，当 max-height 的值过渡到大于等于200px
    时，max-height 还在继续过渡，直到到达 300px 结束。但是，元素 height 已经不会变化了。

    使用 max-height 引发的问题

    很遗憾，使用 max-height 无法一劳永逸。当你给 max-height 设置较大的值时，例如 9999px，会发现高度的隐藏过渡动画有明显的迟钝。 原因是 max-height 设置较大的值时，例如是从9999px
    隐藏到 0。 当 最大高度 小于 实际高度 的时候， height 才会变小,因为 height 不可能大于 max-height。 因此在 max-height 一直减小到小于 height
    之前所花费的过渡时间，就是导致迟钝的原因，所以请设置适当的 max-height 的值。

  • 使用 javascript 进行控制。使用 javascript 可以精确的计算元素高度并设置高度

该博客版权归饶英俊（Royin）所有，严禁抄袭，欢迎转载。如有反馈或建议等可通过邮箱联系我
本文链接：https://raoyingjun.github.io/2021/10/26/%E4%B8%8D%E5%AE%9A%E9%AB%98%E5%BA%A6%E5%85%83%E7%B4%A0%E5%A6%82%E4%BD%95%E4%BA%A7%E7%94%9F%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/