移动端表单项显隐不能只用 display: none，因其不支持动画且导致元素瞬间消失；应改用 opacity 与 visibility 组合实现平滑淡入淡出，并配合 pointer-events: none 和节流等细节优化体验。
移动端表单项显隐为什么不能只用 display: none
直接切 display: none 会导致元素瞬间消失，没有过渡；更关键的是，display 属性本身不支持 CSS 动画（浏览器会跳过对它的过渡处理）。想淡入淡出，必须改用可动画的属性，比如 opacity 和 visibility 组合，再配合 transform 避免重排影响性能。
用 opacity + visibility 实现平滑淡入淡出
这是最稳妥的组合：用 opacity 控制透明度变化，用 visibility 确保隐藏时不可交互、不占可点击区域。注意不能只靠 opacity: 0，否则元素仍响应点击、占据布局空间。
实操建议：
- 初始状态设为
opacity: 0; visibility: hidden;，动画结束后才真正隐藏 - 显示时先设
visibility: visible;，再用transition触发opacity变化 - 过渡时间建议控制在
0.2s ~ 0.3s，太长显得卡顿，太短用户感知不到 - 务必加
will-change: opacity;（可选），提示浏览器提前优化渲染
.form-item {
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s step-end;
}
.form-item.active {
opacity: 1;
visibility: visible;
}
结合 @media 和 JS 控制移动端动态显示逻辑
CSS 负责动画效果，但“何时显示/隐藏”得由 JS 判断条件（如用户选择某选项、滚动位置、屏幕宽度变化）。移动端尤其要注意 touch 事件和 resize 的节流，避免频繁触发重绘。
立即学习“前端免费学习笔记（深入）”；
常见场景与要点：
- 下拉选择后显示关联字段：监听
change事件，给对应<div class="form-item">切换active类名 - 横竖屏切换时调整表单结构：用
@media (orientation: landscape)微调间距或列数，但不要靠它控制显隐——CSS 媒体查询无法触发动画重播 - 键盘弹出导致视口高度变化：监听
resize时需防抖，且优先用visualViewportAPI（Chrome/Edge 支持）而非window.innerHeight
容易被忽略的兼容性与体验细节
看似简单的淡入淡出，在真实移动端环境里有几个硬伤点：
- iOS Safari 对
transform: scale(0)+opacity组合动画有渲染残留，建议统一用opacity+visibility - 部分安卓 WebView（如微信内置）不支持
step-end，visibility过渡要写成visibility 0s 0.25s延迟隐藏 - 表单项含
<input>时，opacity: 0后仍可能被自动聚焦（尤其 iOS），务必加pointer-events: none;配合 - 动画中若用户快速连续触发显隐，JS 类名切换可能来不及响应，建议加节流或用
getComputedStyle检查当前状态再操作
动画不是炫技，是让状态变化可感知。动效一旦卡住或错位，用户第一反应不是“好看”，而是“这东西坏了”。
