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

渐进式高度过渡动画

问题：

在 html 中，一个包含文本的

标签被隐藏在

元素中。当

标签显示时，

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

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

解决方案：

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

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

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

html：

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

css：

.box {
  background-color: blue;
  overflow: hidden;
  transition: all 1s;
}

javascript：

const autoH = $('.box').height();
let h = 0;
$('.box').height(0);
$('.button').click(function() {
  $('.box').height(h ^= autoH);
});

在这个代码示例中：

• 我们使用 javascript 获取 元素的实际高度并将其存储在 autoh 变量中。
• 我们将 元素的初始高度设置为 0，将其隐藏。
• 当按钮被点击时，javascript 将 h 变量的值从 0 切换到 autoh 或从 autoh 切换到 0。
• css 过渡效果将负责以平滑的动画方式逐渐增大或减小 元素的高度。

以上就是如何在 HTML 中实现渐进式高度动画过渡？的详细内容，更多请关注其它相关文章！