通过CSS transition实现宽高平滑过渡，需设置transition属性控制width和height变化，可使用all简化多个属性过渡，解决height:auto无法直接过渡的问题可用max-height或JavaScript动态计算，也可结合transform:scale()提升性能，注意两者对布局的影响差异。
要实现元素高度和宽度的平滑过渡效果，可以通过 CSS 的 transition 属性来控制。关键在于设置需要过渡的属性（如 width 和 height），并定义过渡的时间、缓动函数等。
1. 基础语法：使用 transition 控制宽高变化
给元素添加 transition 属性，指定 width 或 height 的过渡效果：
div {
width: 100px;
height: 50px;
background-color: blue;
transition: width 0.3s ease, height 0.3s ease;
}
div:hover {
width: 200px;
height: 100px;
}
当鼠标悬停时，宽度和高度会在 0.3 秒内平滑变化，使用 ease 缓动函数。
2. 使用 all 简化多个属性过渡
如果希望所有属性都具有过渡效果，可以用 all 代替单独列出属性：
立即学习“前端免费学习笔记（深入）”；
.box {
width: 100px;
height: 50px;
transition: all 0.4s linear;
}
.box.expanded {
width: 300px;
height: 200px;
}
切换类名时，宽高会同时线性过渡。
绘蛙AI修图
绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色
285 查看详情
3. 处理 height: auto 的过渡问题
CSS 无法直接对 height: auto 做过渡动画，因为 auto 不是具体数值。解决方法有两种：
使用 max-height 设置一个足够大的值，例如：
transition: max-height 0.5s ease;
max-height: 0;
悬停时设置 max-height: 500px;，模拟展开效果。 用 JavaScript 获取实际高度后动态设置 transition 和 height。
4. 配合 transform 实现更流畅的效果（可选）
在某些场景下，使用 transform: scale() 能获得更好的性能，尤其适用于视觉缩放：
.scale-box {
transform: scale(1);
transition: transform 0.3s ease;
}
.scale-box:hover {
transform: scale(1.2);
}
注意：scale 是缩放整个元素，不会影响布局流，而 width/height 会。
基本上就这些。合理使用 transition 可以让宽高变化更自然，重点是明确过渡属性、时间与兼容 auto 高度的问题。不复杂但容易忽略细节。
以上就是如何通过css transition控制高度和宽度过渡的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1071561.html
微信扫一扫 
支付宝扫一扫 
