使用transition属性可实现CSS宽高平滑过渡。1. 基础语法：为width和height分别设置transition，如transition: width 0.3s ease, height 0.3s ease；2. 简化写法：用transition: all 0.4s ease统一控制，但需注意性能影响；3. 注意事项：尺寸需设具体值避免auto，不建议对display操作，动态高度应加overflow: hidden，优先用transform优化性能；4. 应用示例：通过JavaScript切换类实现卡片高度平滑展开，如.card.expanded { height: 150px }配合transition: height 0.3s ease，适用于折叠面板等交互场景。
在CSS中实现宽度和高度的平滑过渡效果，主要依靠 transition 属性。通过设置 transition，可以让元素在尺寸变化时产生动画效果，而不是瞬间完成，从而提升用户体验。
1. 基础语法：使用 transition 控制宽高变化
要让 width 和 height 支持过渡动画，需在元素上定义 transition 属性。最简单的写法是：
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: width 0.3s ease, height 0.3s ease;
}
.box:hover {
width: 200px;
height: 200px;
}
当鼠标悬停时，width 和 height 会以 0.3 秒的缓动动画展开。
2. 使用 all 简化属性声明
如果希望所有可动画属性都启用过渡，可以使用 all 关键字：
立即学习“前端免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: all 0.4s ease;
}
.box:hover {
width: 180px;
height: 180px;
}
这种方式更简洁，但要注意可能影响其他属性的性能或行为。
3. 注意事项与常见问题
在实际使用中，以下几点需要特别注意：
- 初始值必须明确：如果 width 或 height 设置为 auto，浏览器难以计算过渡路径，可能导致动画失效。建议始终使用具体数值（如 px、%）。
- 避免对 display 操作：display: none 到 block 的切换无法触发 transition。可用 visibility 或 opacity 配合 height 过渡模拟显示/隐藏。
- overflow 处理：在高度动态变化时（如下拉菜单），设置 overflow: hidden 可防止内容溢出造成布局抖动。
- 性能优化：频繁重绘会影响性能，尽量使用 transform 替代宽高变化。若必须用 width/height，确保过渡时间合理（通常 200ms–500ms 之间）。
4. 实际应用场景示例：可展开卡片
一个常见的实践是制作点击展开的说明卡片：
.card {
width: 250px;
height: 60px;
background: #f1f1f1;
padding: 10px;
overflow: hidden;
transition: height 0.3s ease;
}
.card.expanded {
height: 150px;
}
通过 JavaScript 添加或移除 expanded 类，即可实现平滑的高度扩展，适合 FAQ 或折叠面板。
基本上就这些。掌握 transition 对 width 和 height 的控制，能让你的界面交互更自然流畅。关键是设置明确的尺寸值，并合理配置过渡时间和缓动函数。
