css 过渡动画疑难解答
在 CSS 中，过渡动画常用于在元素属性发生变化时平滑地进行。然而，当涉及到高度时，可能会遇到一些问题。
问题：
在一个 JS Bin 中，当显示一个包含文本的
标签时，它的高度会撑起其父元素 .box。即使为 .box 设置了 transition: all .5s 的过渡，Height 变化时，动画效果也不如预期。希望当高度发生变化时，.box 能缓慢增加高度，而不是突然撑高。
解答：
立即学习“前端免费学习笔记（深入）”；
CSS 动画不支持 height: auto。因此，为了实现平滑的动画效果，可以使用 JavaScript 获取 .box 的实际高度，然后在点击按钮时切换高度。
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);});
登录后复制
在这种情况下，.box 在加载时高度为 0。当点击按钮时，JavaScript 代码会将高度切换为 .box 的实际高度和 0 之间。由于设置了过渡，高度的变化会以动画形式平滑地发生。
以上就是CSS 过渡动画如何实现 `height: auto` 元素的平滑变化？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2809016.html
