:active 仅在按下未松开时生效，无法持久保留状态或跨设备一致工作，需 js 配合类名（如 is-pressed/is-active）实现可靠点击反馈与状态管理。
用 :active 实现按钮点击瞬间反馈，但别指望它撑全场
纯 CSS 的 :active 确实能响应鼠标按下、触摸开始那一刻，但它只在“按住未松开”期间生效，松手就消失。这意味着它无法保留状态（比如“已点击”“已激活”），也不能跨设备一致工作——在某些 iOS Safari 上，:active 默认不触发，得加 cursor: pointer 或监听空事件才能唤醒。
- 移动端真机测试必做，别只看 Chrome DevTools 的模拟器
- 如果按钮需要“点一下变选中，再点一下取消”，
:active完全不够，必须配合 JS 控制类名 - 不要给
:active加太重的动画（比如transform: scale(0.95)可以，但transition: all 0.3s容易卡顿）
统一管理按钮状态类名，推荐用 is-pressed / is-active 这类 BEM 风格命名
靠 JS 切换类名比写一堆 [data-state="pressed"] 更直观、更易维护。关键是命名要和语义对齐：是临时按下（is-pressed），还是持久激活（is-active），别混用。
-
is-pressed对应手指/鼠标按下的瞬时态，适合视觉压感反馈 -
is-active表示当前被选中或启用，比如导航项、开关按钮的“开”状态 - 避免用
clicked这种动词——它描述动作，不是状态，后续扩展（比如初始化就激活）会别扭 - 所有按钮组件统一监听
mousedown+touchstart，并在mouseup/touchend后移除is-pressed
CSS 中用 transition 控制反馈节奏，别让状态变化“啪”一下跳出来
按钮状态切换如果没过渡，人眼会觉得卡顿或无响应。但过渡属性不能全写 all，尤其别让 color 或 background-color 慢悠悠变——用户点下去，得立刻感知到“我按到了”。
- 推荐只过渡
transform和opacity，它们能 GPU 加速，不触发布局重排 - 例如：
transition: transform 0.12s ease, opacity 0.12s ease; - 如果用了
box-shadow做按下效果，也把它加进transition列表，否则阴影会突兀出现 - 别在
:active里写transition-delay——它无效，状态伪类不支持延迟过渡
遇到 pointer-events: none 或禁用按钮，交互反馈必须降级处理
当按钮是 disabled 或被父层设了 pointer-events: none，:active 不触发，JS 的 mousedown 也收不到。这时候强行加反馈反而误导用户。
- 禁用按钮统一用
opacity: 0.4; cursor: not-allowed;，并确保它没有is-pressed类 - 如果业务逻辑允许“视觉可点但实际拦截”，比如权限不足时点击弹提示，那就别设
disabled，而是用 JS 拦截并手动加is-pressed，再立即移除 - 注意：Vue/React 中用
v-if或display: none移除按钮后，它根本不在 DOM 里，自然也没任何交互响应——这点常被忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
