h5中transition平滑过渡需满足三要素：写在初始样式、属性可插值且类型一致、正确声明四个维度；错误写在:hover会导致移出无过渡，推荐用transform/opacity并显式声明。
要在 H5 页面中用 transition 实现平滑过渡，核心是「状态变化 + 可插值属性 + 正确声明位置」三者缺一不可。关键不是加了 transition 就能动，而是它必须写在元素的初始样式里，且变化的属性得支持动画、值类型一致。
transition 必须写在基础选择器中
很多人把 transition 写在 :hover 或 :active 里，结果鼠标移出就“啪”一下跳回——这不是 bug，是浏览器规则：只有起始态和结束态都匹配同一组 transition 声明，才启用双向过渡。
- ❌ 错误写法：
.btn:hover { background: #0056b3; transition: background 0.3s; }→ 移出无过渡 - ✅ 正确写法：
.btn { background: #007bff; transition: background 0.3s ease; } .btn:hover { background: #0056b3; }→ 进出都平滑 - JS 控制 class（如
.btn.active）也同理：transition 必须在.btn规则里，不能只写在.active
只对可动画化属性生效，且值要可插值
不是所有 CSS 属性都能过渡。浏览器只能在两个明确、可计算中间值的值之间做渐变。
- ✅ 安全常用：
opacity、transform（推荐优先用，不触发布局重排）、background-color、color、border-color - ⚠️ 谨慎使用：
width、height、margin、padding—— 触发重排，可能卡顿 - ❌ 完全无效：
display、visibility、height: auto、z-index - 颜色值要类型一致：比如
rgb(255,0,0)→rgba(255,0,0,0.5)可以；但#ff0000→transparent在部分 Safari 中可能失效，建议改用rgba(0,0,0,0)→rgba(0,0,0,1)
合理设置 transition 的四个维度
transition 是简写，对应四个子属性：property（哪个属性动）、duration（动多久）、timing-function（怎么动）、delay（等多久再动）。前两个是必填项。
- 避免写
all：比如transition: all 0.2s看似省事，但box-shadow、z-index等意外变化也会带过渡，调试困难 - 推荐显式声明：
transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); - 不同属性节奏不同？可拆开写：
transition-property: opacity, transform;+transition-duration: 0.2s, 0.25s;+transition-timing-function: ease, cubic-bezier(...); - 若某属性仅在 hover 中新增（如
box-shadow），基础态记得设为box-shadow: none;，否则从“无”到“有”插值易突兀
:active 伪类难触发过渡？换 JS 控制更可靠
:active 是瞬时状态，手指一松就消失，transition 往往来不及播放。纯 CSS 场景下，它不适合做可见动画。
- 点击反馈建议用 JS 切换 class：
element.classList.toggle('pressed')，然后把 transition 写在基础规则中 - 例如按钮点击缩放：
.btn { transform: scale(1); transition: transform 0.15s; } .btn.pressed { transform: scale(0.95); } - 滚动、表单验证等动态场景也同理：JS 改 class，CSS 负责过渡，分工清晰、可控性强
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
