transition 必须写在状态变化的元素本身上，如按钮的基础样式中；若只写在:hover或:active伪类里则不生效，因过渡需起始与结束状态均匹配该声明。
transition 该写在哪个元素上才生效
transition 必须写在**状态变化的元素本身**上，而不是它的父元素或触发按钮上。比如你想让按钮背景色点击时平滑变色，transition 要加在按钮的 CSS 规则里，而不是 :hover 或 :active 伪类里。
常见错误是只写在伪类中：
button:hover { background: #007bff; transition: background 0.3s ease; } /* ❌ 不生效 */
正确写法是把 transition 放在基础状态（如 button）中：
button {<br> background: #007bff;<br> transition: background 0.3s ease;<br>}<br>button:hover { background: #0056b3; } /* ✅ hover 时自动过渡 */
- transition 定义的是“从什么状态到什么状态之间如何过渡”，所以它必须存在于起始和结束状态都匹配的规则中
- 如果只写在
:active里，点击松开瞬间会跳变回原样，没有释放动画 - 支持多个属性同时过渡，例如
transition: background 0.3s, transform 0.2s;
click 状态下 transition 为什么经常不触发
浏览器默认不会为 :active 伪类保留足够长的视觉反馈时间——手指/鼠标松开后，:active 立即失效，导致过渡来不及播放。这不是 transition 写错了，而是状态持续时间太短。
解决方式不是改 CSS，而是用 JS 控制 class 切换：
button.addEventListener('click', () => {<br> btn.classList.add('clicked');<br> setTimeout(() => btn.classList.remove('clicked'), 300);<br>});
配合 CSS：
button { transition: background 0.3s ease; }<br>button.clicked { background: #28a745; }
- 纯 CSS 的
:active只适合“按下去那一瞬”的反馈，不适合需要持续可见的过渡效果 - 用 class + JS 是最可控的方式，能精准控制过渡起点、终点和持续时间
- 注意：不要在 click 后立刻 remove class，否则过渡会被中断；要等
transitionend事件或用 setTimeout 对齐 duration
transition 属性值顺序有没有影响
有影响，但只在省略部分参数时体现。完整语法是：transition: <property><duration><timing-function><delay>;</delay></timing-function></duration></property>
常见简写：
transition: background 0.3s ease; /* ✅ 隐式 delay=0 */<br>transition: background 0.3s; /* ✅ timing-function 默认 ease */<br>transition: 0.3s background; /* ❌ 无效！duration 不能放前面 */
- 第一个可识别的值必须是属性名（如
background）或all，否则整条声明被忽略 -
transition: all 0.3s;虽然能用，但性能差——任何属性变化都会触发重绘，包括height、margin这类开销大的属性 - 推荐显式指定属性，例如
transition: background-color 0.3s, transform 0.2s;
移动端 click 动画卡顿或失效的典型原因
主要是 iOS Safari 和部分安卓 WebView 对 :active 的处理机制不同：默认禁用非 <a></a> 元素的 active 状态，除非给元素加 cursor: pointer 或绑定空的 ontouchstart。
更稳妥的做法是统一用 touchstart + class：
btn.addEventListener('touchstart', e => {<br> e.preventDefault(); // 防止双击缩放等干扰<br> btn.classList.add('touched');<br>});<br>btn.addEventListener('touchend', () => {<br> setTimeout(() => btn.classList.remove('touched'), 300);<br>});
CSS 中复用同一套 transition 规则即可。
- 不要依赖
:active在移动端做主要交互反馈 -
transform和opacity是硬件加速属性，优先选它们做动画；避免对width、left等触发布局重排的属性做 transition - transition duration 小于 100ms 在低端机上可能感知不到，建议不低于 120ms
过渡真正难的不是写法，而是判断什么时候该用 transition、什么时候该切到 @keyframes 或 JS 动画库——比如需要循环、暂停、精确控制中间帧时，transition 就不够用了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
