渐进式高度过渡动画
问题：
在 html 中，一个包含文本的 <p> 标签被隐藏在 <div> 元素中。当 <p> 标签显示时，<div> 元素的高度会突然增大。如何实现 <div> 元素的高度在 <p> 标签显示时以动画方式逐渐增加？
解决方案：
立即学习“前端免费学习笔记（深入）”；
css 动画不支持 height: auto。因此，我们需要使用 javascript 来动态获取 <div> 元素的实际高度，然后在点击按钮时交替设置高度为 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);
});在这个代码示例中：
以上就是如何在 HTML 中实现渐进式高度动画过渡？的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
433
收藏
