表单控件的 transition 失效主因是浏览器对原生样式（如 outline、默认 focus 重置）不触发过渡，且 all 过渡不可靠；应显式声明可动画属性（如 border-color）、清除 outline、用 class 替代 disabled 属性，并为 ::placeholder 单独加 transition。
transition 不能直接作用于表单控件的某些动态属性
很多初学者会写 input { transition: all 0.3s; } 然后期待输入框聚焦时边框颜色自动过渡——但实际可能“没反应”。根本原因是：部分浏览器对表单控件的原生样式（比如 outline、border 在 :focus 下的默认重置）不触发 CSS 过渡，尤其当 UA 样式覆盖了你的声明时。
解决思路是显式声明可过渡的属性，并确保状态变更前后该属性值有明确变化：
- 必须指定具体属性，避免用
all（它会尝试过渡所有可变属性，包括不可过渡的，还可能拖慢性能） - 确保 :focus 或 :hover 中修改的是你已声明过渡的属性，例如
border-color而非outline - 某些控件（如
textarea）在 resize 时不会触发动画，transition对resize行为本身无效
input 和 textarea 的 border / background 过渡要手动覆盖默认 focus 样式
浏览器会给 input:focus 加上默认 outline，而 outline 不支持 transition。想实现平滑边框变色，得先清除 outline，再用 border 承担焦点反馈：
input, textarea {
border: 2px solid #ccc;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
input:focus, textarea:focus {
outline: none;
border-color: #007bff;
background-color: #f8f9fa;
}
注意：background-color 过渡在 textarea 上效果明显，但在部分 input 类型（如 type="number"）中可能被系统控件遮挡，需配合 appearance: none 和额外内边距调整。
立即学习“前端免费学习笔记（深入）”；
placeholder 文字颜色过渡需要伪元素单独处理
::placeholder 是伪元素，它的样式变化默认不继承父元素的 transition。若想让占位符文字在聚焦时淡入/变色，必须给伪元素自己加 transition：
input::placeholder {
color: #999;
transition: color 0.2s ease;
}
input:focus::placeholder {
color: transparent;
}
兼容性提示：::placeholder 在旧版 Safari 需用 ::-webkit-input-placeholder，且各浏览器对伪元素过渡的支持程度不一，建议只用于颜色、opacity 类简单变化。
disabled 状态切换时过渡容易失效
当 JS 动态设置 input.disabled = true，浏览器通常会立即应用禁用样式（如灰色背景、低 opacity），而不会触发 transition——因为 disabled 是布尔属性，不是 CSS 状态类，不产生样式“渐变过程”。
更可靠的做法是用 class 控制禁用视觉效果：
- 移除
disabled属性，改用class="is-disabled" - 在 CSS 中定义
.is-disabled { opacity: 0.6; cursor: not-allowed; transition: opacity 0.2s; } - JS 中通过
el.classList.add("is-disabled")切换，确保过渡生效
真实项目里，表单控件的过渡效果常卡在“看似写了却不动”，问题大多出在状态触发机制（:focus/:hover/class）和属性可动画性之间不匹配。动手前先用 DevTools 检查 computed styles，确认目标属性在两个状态间确实发生了数值变化，再谈过渡。
