如何在 HTML 中实现渐进式高度动画过渡？

发布日期： 2024-10-22 阅读量： 作者： 网络

如何在 html 中实现渐进式高度动画过渡？

渐进式高度过渡动画

问题：

在 html 中，一个包含文本的

标签被隐藏在

元素中。当

标签显示时，

元素的高度会突然增大。如何实现元素的高度在

标签显示时以动画方式逐渐增加？

解决方案：

css 动画不支持 height: auto。因此，我们需要使用 javascript 来动态获取

元素的实际高度，然后在点击按钮时交替设置高度为 0 和实际高度。

以下示例代码说明了如何实现此效果：

html：

<div class="box">
  <p>我是文本</p>
</div>
<button class="button">切换高度</button>

随便看看